@mptw/skylens-ui 1.4.109 → 1.5.1

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

@@ -19,7 +19,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: "SLRadioButtonGroup",
@@ -82,33 +82,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.radio-button-group
-  .is-invalid
-    .invalid-feedback
-      @apply block
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.radio-button-group .is-invalid .invalid-feedback {
+  @apply block;
+}
 
-  & > label
-    @apply mb-2 text-base text-pgray-2 align-top
+.radio-button-group > label {
+  @apply mb-2 text-base text-pgray-2 align-top;
+}
 
-  .form-control
-    @apply flex flex-col space-y-1
+.radio-button-group .form-control {
+  @apply flex flex-col space-y-1;
+}
 
-    &.inline
-      @apply flex flex-row flex-wrap space-x-6 space-y-0
+.radio-button-group .form-control.inline {
+  @apply flex flex-row flex-wrap space-x-6 space-y-0;
+}
 
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+.radio-button-group .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 
-  &--lg
-    .form-control
-      &.inline
-        @apply space-x-8
+.radio-button-group--lg .form-control.inline {
+  @apply space-x-8;
+}
 
-      .radio-button
-        label
-          @apply text-sm
+.radio-button-group--lg .form-control .radio-button label {
+  @apply text-sm;
+}
 
-          span
-            @apply ml-2 text-sm
+.radio-button-group--lg .form-control .radio-button label span {
+  @apply ml-2 text-sm;
+}
 </style>

package/app/components/SLRadioGroup.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+SLElementWithTitle(:title='disabled ? disabledHint : ""')
+  .radio-group(:class='sizeClass')
+    .radio(v-for="option, i in options")
+      input(
+        type="radio"
+        :id="uids[i]"
+        :checked="modelValue === option.value"
+        :disabled="disabled"
+      )
+      SLElementWithTitle(:title='option.desc')
+        label(@click="onClickedRadio(option.value)")
+          span(v-if='option.label') {{ option.label }}
+          SLIcon(v-if='option.icon' :icon='option.icon')
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { getUID } from "~ui/app/utils";
+import type IInputOption from "~ui/app/interface/IInputOption";
+
+export default defineComponent({
+  name: "SLRadioGroup",
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      default: null,
+    },
+    options: {
+      type: Array as PropType<Array<IInputOption>>,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    disabledHint: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) =>
+        ["", "md", "sm", "xs", "xxs", "3xs"].includes(val),
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    colorInvert: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { size, color, colorInvert, options, disabled } = toRefs(props);
+
+    const uids = ref<Array<string>>([]);
+
+    const sizeClass = computed(() => {
+      const classes = [];
+      if (size.value !== "") {
+        classes.push(`radio-group--${size.value}`);
+      }
+      if (color.value !== "") {
+        classes.push(`radio-group--${color.value}`);
+      }
+      if (colorInvert.value) {
+        classes.push("color-invert");
+      }
+      if (disabled.value) {
+        classes.push("disabled");
+      }
+
+      return classes.join(" ");
+    });
+
+    function onChanged(e: Event, targetValue: any) {
+      const { target } = e;
+      if ((target as HTMLInputElement).checked) {
+        emit("update:modelValue", targetValue);
+      }
+    }
+
+    function onClickedRadio(targetValue: any) {
+      if (disabled.value) return;
+
+      emit("update:modelValue", targetValue);
+    }
+
+    onMounted(() => {
+      uids.value = options.value.map(() => getUID());
+    });
+
+    return {
+      uids,
+      sizeClass,
+      onChanged,
+      onClickedRadio,
+    };
+  },
+});
+</script>
+
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.radio-group {
+  @apply inline-flex p-0.5 bg-primary-100 border border-primary-200 rounded;
+}
+
+.radio-group.radio-group--sm .radio label {
+  @apply px-2 py-1.5;
+}
+
+.radio-group.radio-group--xs .radio label {
+  @apply px-4 py-0.5 text-sm;
+}
+
+.radio-group.radio-group--xxs {
+  @apply p-0.75;
+}
+
+.radio-group.radio-group--xxs .radio label {
+  @apply px-2 py-0.75 text-sm;
+}
+
+.radio-group.radio-group--3xs {
+  @apply p-0.75;
+}
+
+.radio-group.radio-group--3xs .radio label {
+  @apply px-2 py-px text-sm;
+}
+
+.radio-group.radio-group--third-600 {
+  @apply bg-third-600 border-third-500;
+}
+
+.radio-group.radio-group--third-600 .radio label {
+  @apply bg-third-600 text-white;
+}
+
+.radio-group.radio-group--third-600 .radio input:checked + .element-with-title label {
+  @apply text-third;
+}
+
+.radio-group.radio-group--edit {
+  @apply bg-edit border-primary;
+}
+
+.radio-group.radio-group--edit.color-invert {
+  @apply bg-card-lightpr-bg border-primary-300;
+}
+
+.radio-group.radio-group--edit.color-invert .radio label {
+  @apply bg-card-lightpr-bg text-primary-600;
+}
+
+.radio-group.radio-group--edit.color-invert .radio input:checked + .element-with-title label {
+  @apply bg-edit text-white;
+}
+
+.radio-group.radio-group--edit .radio label {
+  @apply bg-edit text-white;
+}
+
+.radio-group.radio-group--edit .radio input:checked + .element-with-title label {
+  @apply text-primary;
+}
+
+.radio-group.radio-group--insight-title {
+  @apply bg-primary-100 border-primary-100;
+}
+
+.radio-group.radio-group--insight-title.color-invert {
+  @apply bg-card-lightpr-bg border-primary-300;
+}
+
+.radio-group.radio-group--insight-title.color-invert .radio label {
+  @apply bg-card-lightpr-bg text-primary-600;
+}
+
+.radio-group.radio-group--insight-title.color-invert .radio input:checked + .element-with-title label {
+  @apply bg-edit text-white;
+}
+
+.radio-group.radio-group--insight-title .radio label {
+  @apply bg-primary-100 text-primary;
+}
+
+.radio-group.radio-group--insight-title .radio input:checked + .element-with-title label {
+  @apply bg-insight-title text-white;
+}
+
+.radio-group.disabled {
+  @apply bg-pgray-6 border-pgray-6;
+}
+
+.radio-group .radio {
+  @apply relative inline-flex;
+}
+
+.radio-group .radio input {
+  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
+
+.radio-group .radio label {
+  @apply inline-flex justify-center items-center relative px-3 py-1.25 bg-primary-100 rounded text-base leading-[1.3125] text-primary-600 cursor-pointer transition;
+}
+
+.radio-group .radio input:checked + .element-with-title label {
+  @apply bg-white text-primary shadow-default;
+}
+
+.radio-group .radio input:disabled + .element-with-title label {
+  @apply bg-pgray-6 text-pgray-4 cursor-default;
+}
+</style>

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

@@ -163,47 +163,62 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.range-input
-  &.inline
-    @apply flex
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    & > label
-      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
+.range-input.inline {
+  @apply flex;
+}
 
-    .form-control
-      @apply flex-grow
-
-  &.disabled, &.readonly
-    .input-group
-      .input-range-group
-        .range-input-accept-values
-          @apply text-pgray-4
-
-      input[type=text]
-        @apply border-primary-600 bg-primary-100
-
-  & > label
-    @apply mb-2 text-base leading-normal text-pgray-2
-
-  .is-invalid
-    .invalid-feedback
-      @apply block
+.range-input.inline > label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
 
+.range-input.inline .form-control {
+  @apply grow;
+}
 
+.range-input.disabled
   .input-group
-    @apply flex flex-nowrap text-base leading-normal space-x-4
-
-    .input-range-group
-      @apply flex-grow
-
-      .range-input-accept-values
-        @apply flex justify-between mb-1 text-sm text-pgray-3
-
-    input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2
-      @apply s('focus:outline-none')
-
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+  .input-range-group
+  .range-input-accept-values,
+.range-input.readonly
+  .input-group
+  .input-range-group
+  .range-input-accept-values {
+  @apply text-pgray-4;
+}
+
+.range-input.disabled .input-group input[type="text"],
+.range-input.readonly .input-group input[type="text"] {
+  @apply border-primary-600 bg-primary-100;
+}
+
+.range-input > label {
+  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+}
+
+.range-input .is-invalid .invalid-feedback {
+  @apply block;
+}
+
+.range-input .input-group {
+  @apply flex flex-nowrap text-base leading-[1.3125] space-x-4;
+}
+
+.range-input .input-group .input-range-group {
+  @apply grow;
+}
+
+.range-input .input-group .input-range-group .range-input-accept-values {
+  @apply flex justify-between mb-1 text-sm text-pgray-3;
+}
+
+.range-input .input-group input[type="text"] {
+  @apply grow-0 shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2 focus:outline-none;
+}
+
+.range-input .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.chart
+.region-map-chart
   ECharts(
     :loading="loading"
     :option="formatedOption"
@@ -144,7 +144,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.chart
-  @apply h-52
+<style>
+.region-map-chart {
+  @apply h-52;
+}
 </style>

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

@@ -199,44 +199,54 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.right-sider
-  @apply fixed top-0 right-0 h-full
-  z-index 9
-
-  &.show, &.hover
-    @apply z-50
-
-  &.show
-    .right-sider-modal
-      @apply block
-
-  &-modal
-    @apply fixed top-0 left-0 w-full h-full s('bg-mask/70') hidden
-
-  &-content
-    @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-margin
-    max-width calc(100vw - 16px)
-    max-height calc(100% - theme('spacing.8'))
-
-    .sider-toggle
-      @apply absolute top-0 left-0 inline-flex p-3 rounded-l-full text-lg text-white
-      margin-top 123px
-      margin-left -44px
-
-      &-third
-        @apply bg-third-600
-
-      &-purple
-        @apply bg-edit
-
-    &-wrapper
-      @apply flex max-w-full overflow-hidden
-
-    .sider-close-button
-      @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary
-
-  &-addition-content
-    @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-margin
-    max-height calc(100% - theme('spacing.8'))
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.right-sider {
+  @apply z-9 fixed top-0 right-0 h-full;
+}
+
+.right-sider.show,
+.right-sider.hover {
+  @apply z-50;
+}
+
+.right-sider.show .right-sider-modal {
+  @apply block;
+}
+
+.right-sider-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-mask/70 hidden;
+}
+
+.right-sider-content {
+  @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-[margin];
+  max-width: calc(100vw - var(--spacing) * 4);
+  max-height: calc(100% - var(--spacing) * 8);
+}
+
+.right-sider-content .sider-toggle {
+  @apply absolute top-0 left-0 inline-flex mt-30.75 -ml-11 p-3 rounded-l-full text-lg text-white;
+}
+
+.right-sider-content .sider-toggle.sider-toggle-third {
+  @apply bg-third-600;
+}
+
+.right-sider-content .sider-toggle.sider-toggle-purple {
+  @apply bg-edit;
+}
+
+.right-sider-content-wrapper {
+  @apply flex max-w-full overflow-hidden;
+}
+
+.right-sider-content .sider-close-button {
+  @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary;
+}
+
+.right-sider-addition-content {
+  @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-[margin];
+  max-height: calc(100% - var(--spacing) * 8);
+}
 </style>

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

@@ -71,29 +71,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.search-input
-  .is-focus
-    .button-group
-      @apply border-primary
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.search-input--sm
-    .button-group
-      @apply s('py-0.75')
+.search-input .is-focus .button-group {
+  @apply border-primary;
+}
+
+.search-input.search-input--sm .button-group {
+  @apply py-0.75;
+}
 
-      .btn
-        @apply text-sm
+.search-input.search-input--sm .button-group .btn {
+  @apply text-sm;
+}
 
-  .input-group-append
-    @apply inline-flex border-t border-r border-b border-primary-600 rounded-r bg-white
+.search-input .input-group-append {
+  @apply inline-flex border-t border-r border-b border-primary-600 rounded-r bg-white;
+}
 
-  .button-group
-    @apply inline-flex items-center s('py-1.75') s('pr-1.75') s('space-x-1.75')
+.search-input .button-group {
+  @apply inline-flex items-center py-1.75 pr-1.75 space-x-1.75;
+}
 
-    &-divider
-      @apply w-px h-full my-px bg-primary-600
+.search-input .button-group-divider {
+  @apply w-px h-full my-px bg-primary-600;
+}
 
-    .btn
-      @apply p-0 border-0 text-pgray-3 s('focus:outline-none') s('active:outline-none')
+.search-input .button-group .btn {
+  @apply p-0 border-0 text-pgray-3 focus:outline-none active:outline-none;
+}
 </style>
-