@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLTextInput.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { debounce } from "lodash-es";
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLTextInput",
@@ -146,7 +146,7 @@ export default defineComponent({
 
     const debounceUpdateModelValue = debounce(
       lazyUpdateModelValue,
-      Number.isInteger(lazy.value) ? (lazy.value as number) : 500
+      Number.isInteger(lazy.value) ? (lazy.value as number) : 500,
     );
 
     function onFocused() {
@@ -225,136 +225,164 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.text-input
-  &.inline
-    @apply flex
-
-    & > label
-      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
-
-    .form-control
-      @apply flex-grow
-
-  &.is-float
-    & > label
-      @apply hidden
-
-    .input-group
-      &.is-fill
-        .input
-          @apply bg-white border-primary-300
-
-      &.is-focus
-        .input
-          @apply bg-white border-primary
-
-      .input
-        @apply relative bg-primary-50 border-primary-50
-
-        .float-label
-          @apply inline-block
-
-    .is-invalid
-      .input-group
-        .input, .input.is-focus
-          @apply border-danger-light
-
-  &.is-fixed-float
-    & > label
-      @apply hidden
-
-    .input-group
-      .input
-        @apply relative bg-white border-primary
-
-        .float-label
-          @apply inline-block s('ml-1.5') s('-mt-2.25') py-0 s('px-0.5') bg-white text-primary text-xs transition-input-focus
-
-    .is-invalid
-      .input-group
-        .input, .input.is-focus
-          @apply border-danger-light
-
-  &.disabled, &.readonly
-    .input-group
-      &.is-focus
-        .input
-          @apply border-primary-600
-
-      .input
-        @apply border-primary-600 bg-primary-100
-
-  & > label
-    @apply w-full mb-2 text-base leading-normal text-pgray-2
-
-    .required
-      @apply text-danger
-
-  .is-invalid
-    .input-group, .input-group.is-focus
-      .input
-        @apply border-danger-light
-
-        &.input-sm, &.input-xs
-          .icon
-            @apply hidden
-
-        .icon
-          @apply inline-block
-
-    .invalid-feedback
-      @apply block
-
-
-  .input-group
-    @apply flex flex-nowrap text-base leading-normal
-
-    &.is-focus
-      .input
-        @apply border-primary
-
-    &.is-fill, &.is-focus
-      .input
-        .float-label
-          @apply s('ml-1.5') s('-mt-2.25') py-0 s('px-0.5') bg-white text-primary text-xs transition-input-focus
-
-    &-prepend
-      @apply flex-grow-0 flex-shrink-0
-
-    .input
-      @apply flex-grow flex items-center s('p-1.75') bg-white rounded border border-primary-600
-
-      &.input-sm
-        @apply s('py-0.75')
-
-        input
-          @apply text-base
-
-      &.input-xs
-        @apply py-px s('px-0.75')
-
-        input
-          @apply text-base
-
-      &:not(:first-child)
-        @apply rounded-l-none border-l-0
-
-      &:not(:last-child)
-        @apply rounded-r-none border-r-0
-
-      input
-        @apply flex-grow w-full bg-transparent text-pgray-2 placeholder-pgray-4 s('focus:outline-none')
-
-      .icon
-        @apply flex-grow-0 flex-shrink-0 hidden text-danger-light
-
-      .float-label
-        @apply hidden absolute top-0 left-0 s('p-1.75') border-t border-b border-transparent text-pgray-3 cursor-text
-
-    &-append
-      @apply flex-grow-0 flex-shrink-0
-
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.text-input.inline {
+  @apply flex;
+}
+
+.text-input.inline > label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
+
+.text-input.inline .form-control {
+  @apply grow;
+}
+
+.text-input.is-float > label {
+  @apply hidden;
+}
+
+.text-input.is-float .input-group.is-fill .input {
+  @apply bg-white border-primary-300;
+}
+
+.text-input.is-float .input-group.is-focus .input {
+  @apply bg-white border-primary;
+}
+
+.text-input.is-float .input-group .input {
+  @apply relative bg-primary-50 border-primary-50;
+}
+
+.text-input.is-float .input-group .input .float-label {
+  @apply inline-block;
+}
+
+.text-input.is-float .is-invalid .input-group .input,
+.text-input.is-float .is-invalid .input-group .input.is-focus {
+  @apply border-danger-light;
+}
+
+.text-input.is-fixed-float > label {
+  @apply hidden;
+}
+
+.text-input.is-fixed-float .input-group .input {
+  @apply relative bg-white border-primary;
+}
+
+.text-input.is-fixed-float .input-group .input .float-label {
+  @apply inline-block ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+}
+
+.text-input.is-fixed-float .is-invalid .input-group .input,
+.text-input.is-fixed-float .is-invalid .input-group .input.is-focus {
+  @apply border-danger-light;
+}
+
+.text-input.disabled .input-group.is-focus .input,
+.text-input.readonly .input-group.is-focus .input {
+  @apply border-primary-600;
+}
+
+.text-input.disabled .input-group .input,
+.text-input.readonly .input-group .input {
+  @apply border-primary-600 bg-primary-100;
+}
+
+.text-input > label {
+  @apply w-full mb-2 text-base leading-[1.3125] text-pgray-2;
+}
+
+.text-input > label .required {
+  @apply text-danger;
+}
+
+.text-input .is-invalid .input-group .input,
+.text-input .is-invalid .input-group.is-focus .input {
+  @apply border-danger-light;
+}
+
+.text-input .is-invalid .input-group .input.input-sm .icon,
+.text-input .is-invalid .input-group .input.input-xs .icon,
+.text-input .is-invalid .input-group.is-focus .input.input-sm .icon,
+.text-input .is-invalid .input-group.is-focus .input.input-xs .icon {
+  @apply hidden;
+}
+
+.text-input .is-invalid .input-group .input .icon,
+.text-input .is-invalid .input-group.is-focus .input .icon {
+  @apply inline-block;
+}
+
+.text-input .is-invalid .invalid-feedback {
+  @apply block;
+}
+
+.text-input .input-group {
+  @apply flex flex-nowrap text-base leading-[1.3125];
+}
+
+.text-input .input-group.is-focus .input {
+  @apply border-primary;
+}
+
+.text-input .input-group.is-fill .input .float-label,
+.text-input .input-group.is-focus .input .float-label {
+  @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+}
+
+.text-input .input-group-prepend {
+  @apply grow-0 shrink-0;
+}
+
+.text-input .input-group .input {
+  @apply grow flex items-center p-1.75 bg-white rounded border border-primary-600;
+}
+
+.text-input .input-group .input.input-sm {
+  @apply py-0.75;
+}
+
+.text-input .input-group .input.input-sm input {
+  @apply text-base;
+}
+
+.text-input .input-group .input.input-xs {
+  @apply py-px px-0.75;
+}
+
+.text-input .input-group .input.input-xs input {
+  @apply text-base;
+}
+
+.text-input .input-group .input:not(:first-child) {
+  @apply rounded-l-none border-l-0;
+}
+
+.text-input .input-group .input:not(:last-child) {
+  @apply rounded-r-none border-r-0;
+}
+
+.text-input .input-group .input input {
+  @apply grow w-full bg-transparent text-pgray-2 placeholder-pgray-4 focus:outline-none;
+}
+
+.text-input .input-group .input .icon {
+  @apply grow-0 shrink-0 hidden text-danger-light;
+}
+
+.text-input .input-group .input .float-label {
+  @apply hidden absolute top-0 left-0 p-1.75 border-t border-b border-transparent text-pgray-3 cursor-text;
+}
+
+.text-input .input-group-append {
+  @apply grow-0 shrink-0;
+}
+
+.text-input .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 </style>

package/app/components/SLTextarea.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLTextArea",
@@ -92,43 +92,54 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.textarea
-  &.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
+.textarea.inline {
+  @apply flex;
+}
 
-    .form-control
-      @apply flex-grow
+.textarea.inline label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
 
-  &.disabled
-    textarea
-      @apply border-primary-600 bg-primary-100
+.textarea.inline .form-control {
+  @apply grow;
+}
 
-  label
-    @apply mb-2 text-base leading-normal text-pgray-2
+.textarea.disabled textarea {
+  @apply border-primary-600 bg-primary-100;
+}
 
-  .is-invalid
-    textarea
-      @apply border-danger-light
+.textarea label {
+  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+}
 
-    .invalid-feedback
-      @apply block
+.textarea .is-invalid textarea {
+  @apply border-danger-light;
+}
+
+.textarea .is-invalid .invalid-feedback {
+  @apply block;
+}
 
-  .form-control
-    @apply relative
+.textarea .form-control {
+  @apply relative;
+}
 
-  textarea
-    @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-pgray-2 resize-none s('focus:border-primary') s('focus:outline-none')
+.textarea textarea {
+  @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-pgray-2 resize-none focus:border-primary focus:outline-none;
+}
 
-  textarea:focus + .textarea-placeholder
-    @apply invisible
+.textarea textarea:focus + .textarea-placeholder {
+  @apply invisible;
+}
 
-  .form-control-notice
-    @apply inline-block ml-1 text-pgray-3 text-xs
+.textarea .form-control-notice {
+  @apply inline-block ml-1 text-pgray-3 text-xs;
+}
 
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+.textarea .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 </style>

package/app/components/SLToast.vue

@@ -54,19 +54,27 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.toast
-  @apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &-wrapper
-    @apply absolute s('top-1/2') s('left-1/2') py-4 px-6 s('bg-mask/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2')
+.toast {
+  @apply z-100 fixed top-0 left-0 w-full h-full pointer-events-none;
+}
 
-.toast-fade-enter-active
-  @apply transition-opacity duration-300 ease-linear
+.toast-wrapper {
+  @apply absolute top-1/2 left-1/2 py-4 px-6 bg-mask/80 rounded text-base text-white -translate-x-1/2 -translate-y-1/2;
+}
 
-.toast-fade-leave-active
-  @apply transition-opacity duration-200 ease-linear
+.toast-fade-enter-active {
+  @apply transition-opacity duration-300 ease-linear;
+}
 
-.toast-fade-enter-from, .toast-fade-leave-to
-  @apply opacity-0
+.toast-fade-leave-active {
+  @apply transition-opacity duration-200 ease-linear;
+}
+
+.toast-fade-enter-from,
+.toast-fade-leave-to {
+  @apply opacity-0;
+}
 </style>

package/app/components/SLToggleButton.vue

@@ -60,19 +60,26 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.sl-toggle-button
-  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-primary-100 rounded text-base text-primary-600
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.sl-toggle-button-sm
-    @apply s('h-[29px]') px-1 py-0 text-sm
+.sl-toggle-button {
+  @apply inline-flex items-center justify-center p-1.5 space-x-2 bg-primary-100 rounded text-base text-primary-600;
+}
 
-    .icon
-      @apply text-lg leading-none
+.sl-toggle-button.sl-toggle-button-sm {
+  @apply h-7.25 px-1 py-0 text-sm;
+}
 
-  &.active
-    @apply bg-primary-600 text-white
+.sl-toggle-button.sl-toggle-button-sm .icon {
+  @apply text-lg leading-none;
+}
 
-  &.disabled
-    @apply bg-pgray-5 text-white cursor-default
+.sl-toggle-button.active {
+  @apply bg-primary-600 text-white;
+}
+
+.sl-toggle-button.disabled {
+  @apply bg-pgray-5 text-white cursor-default;
+}
 </style>