@mptw/skylens-ui 1.0.0

package/components/SLTextInput.vue

@@ -0,0 +1,362 @@
+<template lang="pug">
+.text-input(:class="textInputClass")
+  label(v-if="label || $slots.label" :for="uid")
+    slot(name='label') {{ label }}
+    span.required(v-if="required")  *
+  .form-control(
+      :class="{ 'is-invalid': isInvalid !== null && isInvalid, 'is-valid': isInvalid !== null && !isInvalid }"
+    )
+    .input-group(
+        :class="{ 'is-focus': isFocus, 'is-fill': modelValue !== '' }"
+      )
+      .input-group-prepend(v-if="$slots.prepend")
+        slot(name="prepend")
+      .input(:class="inputClass")
+        input(
+            :name="name === '' ? uid : name"
+            :type="type"
+            :id="uid"
+            :value="modelValue"
+            :disabled="disabled"
+            :readonly="beReadonly"
+            :placeholder="placeholder"
+            :autocomplete="autocomplete"
+            @compositionstart="onInputCompositionStart"
+            @compositionend="onInputCompositionEnd"
+            @input="onInputedModelValue"
+            @focus="onFocused"
+            @blur="onBlured"
+            @paste="onPasted"
+            ref='input'
+            :data-cy="name === '' ? uid : name"
+          )
+        label(v-if="label || $slots.label" :for="uid").float-label
+          slot(name='label') {{ label }}
+        SLIcon(icon="exclamation-triangle")
+      .input-group-append(v-if="$slots.append")
+        slot(name="append")
+    .invalid-feedback
+      slot(name="invalid-feedback") {{ invalidFeedback }}
+</template>
+
+<script lang="ts">
+import { debounce } from "lodash-es";
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLTextInput",
+  components: {},
+  props: {
+    type: {
+      type: String,
+      default: "text",
+      validator: (val: string) => ["", "text", "password"].includes(val),
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "sm", "xs"].includes(val),
+    },
+    label: {
+      type: String,
+      default: undefined,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFeedback: {
+      type: String,
+      default: "",
+    },
+    variant: {
+      type: String,
+      default: undefined,
+    },
+    lazy: {
+      type: [Boolean, Number],
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    autocomplete: {
+      type: String,
+      default: "new-password",
+    },
+    beReadonly: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    "update:modelValue",
+    "lazyUpdate:modelValue",
+    "focus",
+    "blur",
+    "paste",
+  ],
+  setup(props, { emit }) {
+    const { modelValue, size, lazy, inline, variant, disabled, beReadonly } =
+      toRefs(props);
+
+    const input = shallowRef<HTMLInputElement | null>(null);
+    const uid = ref<string | undefined>(undefined);
+    const isFocus = ref(false);
+    const isComposing = ref(false);
+
+    const textInputClass = computed(() => {
+      const textInputClass: string[] = [];
+
+      if (inline.value) textInputClass.push("inline");
+      if (variant.value === "float") textInputClass.push("is-float");
+      if (disabled.value) textInputClass.push("disabled");
+      if (beReadonly.value) textInputClass.push("readonly");
+
+      return textInputClass;
+    });
+    const inputClass = computed(() => {
+      if (size.value === "") {
+        return "";
+      }
+
+      return `input-${size.value}`;
+    });
+
+    const debounceUpdateModelValue = debounce(
+      lazyUpdateModelValue,
+      Number.isInteger(lazy.value) ? (lazy.value as number) : 500
+    );
+
+    function onFocused() {
+      isFocus.value = true;
+      emit("focus");
+    }
+
+    function onBlured() {
+      isFocus.value = false;
+      emit("blur");
+    }
+
+    function onPasted(e: ClipboardEvent) {
+      emit("paste", e);
+    }
+
+    function lazyUpdateModelValue(newValue: string) {
+      emit("lazyUpdate:modelValue", newValue);
+    }
+
+    function onInputCompositionStart() {
+      isComposing.value = true;
+    }
+
+    function onInputCompositionEnd(e: CompositionEvent) {
+      const target = e.target as HTMLInputElement;
+      if (target) {
+        if (Number.isInteger(lazy.value) || lazy.value) {
+          debounceUpdateModelValue(target.value);
+        }
+
+        emit("update:modelValue", target.value);
+      }
+    }
+
+    function onInputedModelValue(e: Event) {
+      const inputEvent = e as InputEvent;
+      if (isComposing.value && !inputEvent.isComposing) {
+        isComposing.value = false;
+        return;
+      }
+
+      const target = inputEvent.target as HTMLInputElement;
+
+      if (target) {
+        if (Number.isInteger(lazy.value) || lazy.value) {
+          debounceUpdateModelValue(target?.value || "");
+        }
+
+        emit("update:modelValue", target?.value || "");
+      }
+    }
+
+    function focus() {
+      if (!input.value) return;
+      input.value.focus();
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      input,
+      uid,
+      isFocus,
+      textInputClass,
+      inputClass,
+      onFocused,
+      onBlured,
+      onPasted,
+      onInputCompositionStart,
+      onInputCompositionEnd,
+      onInputedModelValue,
+      focus,
+    };
+  },
+});
+</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-lighter
+
+      &.is-focus
+        .input
+          @apply bg-white border-primary
+
+      .input
+        @apply relative bg-bg-middle border-bg-middle
+
+        .float-label
+          @apply inline-block
+
+    .is-invalid
+      .input-group
+        .input, .input.is-focus
+          @apply border-danger-hover
+
+  &.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-hover
+
+  &.disabled, &.readonly
+    .input-group
+      &.is-focus
+        .input
+          @apply border-primary-light
+
+      .input
+        @apply border-primary-light bg-bg
+
+  & > label
+    @apply mb-2 text-base leading-normal text-gray-2
+
+    .required
+      @apply text-danger
+
+  .is-invalid
+    .input-group, .input-group.is-focus
+      .input
+        @apply border-danger-hover
+
+        &.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-light
+
+      &.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-gray-2 placeholder-gray-4 s('focus:outline-none')
+
+      .icon
+        @apply flex-grow-0 flex-shrink-0 hidden text-danger-hover
+
+      .float-label
+        @apply hidden absolute top-0 left-0 s('p-1.75') border-t border-b border-transparent text-gray-3 cursor-text
+
+    &-append
+      @apply flex-grow-0 flex-shrink-0
+
+  .invalid-feedback
+    @apply hidden text-danger text-xs
+</style>

package/components/SLTextarea.vue

@@ -0,0 +1,134 @@
+<template lang="pug">
+.textarea(:class="{ inline, disabled: disabled }")
+  label(v-if="label" :for="uid")
+    span {{ label }}
+    .form-control-notice(v-if='notice || $slots.notice')
+      slot(name='notice' v-if='$slots.notice')
+      template(v-else) ({{ notice }})
+  .form-control(
+      :class="{ 'is-invalid': isInvalid !== null && isInvalid, 'is-valid': isInvalid !== null && !isInvalid }"
+    )
+    textarea(
+        :id="uid"
+        :rows="rows"
+        v-model="modelProxy"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="onInputed"
+      )
+    .invalid-feedback
+      slot(name="invalid-feedback") {{ invalidFeedback }}
+</template>
+
+<script lang="ts">
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLTextArea",
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFeedback: {
+      type: String,
+      default: "",
+    },
+    rows: {
+      type: Number,
+      default: 6,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    notice: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue } = toRefs(props);
+
+    const uid = ref<string | undefined>(undefined);
+    const modelProxy = ref(modelValue.value);
+
+    function onInputed(e: Event) {
+      const { target } = e;
+      emit("update:modelValue", (target as HTMLInputElement).value);
+    }
+
+    watch(modelValue, () => {
+      modelProxy.value = modelValue.value;
+    });
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      uid,
+      modelProxy,
+      onInputed,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.textarea
+  &.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
+
+  &.disabled
+    textarea
+      @apply border-primary-light bg-bg
+
+  label
+    @apply mb-2 text-base leading-normal text-gray-2
+
+  .is-invalid
+    textarea
+      @apply border-danger-hover
+
+    .invalid-feedback
+      @apply block
+
+  .form-control
+    @apply relative
+
+  textarea
+    @apply block w-full p-2 border border-primary-light rounded bg-white text-base text-gray-2 resize-none s('focus:border-primary') s('focus:outline-none')
+
+  textarea:focus + .textarea-placeholder
+    @apply invisible
+
+  .form-control-notice
+    @apply inline-block ml-1 text-gray-3 text-xs
+
+  .invalid-feedback
+    @apply hidden text-danger text-xs
+</style>

package/components/SLToast.vue

@@ -0,0 +1,71 @@
+<template lang="pug">
+Transition(name='toast-fade')
+  .toast(v-if='show')
+    .toast-wrapper {{ message }}
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLToast",
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update:show"],
+  setup(props, { emit }) {
+    const { show } = toRefs(props);
+
+    let showTimeoutId: any = null;
+
+    function clearShowTimeout() {
+      if (showTimeoutId) {
+        clearTimeout(showTimeoutId);
+      }
+      showTimeoutId = null;
+    }
+
+    function setupHideTimeout() {
+      clearShowTimeout();
+
+      showTimeoutId = setTimeout(() => {
+        emit("update:show", false);
+      }, 1300);
+    }
+
+    watch(show, () => {
+      if (show.value) {
+        setupHideTimeout();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      clearShowTimeout();
+    });
+
+    return {};
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.toast
+  @apply fixed top-0 left-0 w-full h-full pointer-events-none
+
+  &-wrapper
+    @apply absolute s('top-1/2') s('left-1/2') py-4 px-6 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2')
+
+.toast-fade-enter-active
+  @apply transition-opacity duration-300 ease-linear
+
+.toast-fade-leave-active
+  @apply transition-opacity duration-200 ease-linear
+
+.toast-fade-enter-from, .toast-fade-leave-to
+  @apply opacity-0
+</style>

package/components/SLToggleButton.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+a.sl-toggle-button(
+  href="javascript:;"
+  :class="[{ active: isActive, disabled: isDisabled }, sizeClass]"
+  data-skip-download
+  @click.prevent="onClicked"
+)
+  SLIcon(:icon="icon")
+  span(v-if="title !== ''") {{ title }}
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLToggleButton",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "chart_with_num",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    isActive: {
+      type: Boolean,
+      default: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "sm"].includes(val),
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { isDisabled, size } = toRefs(props);
+
+    const sizeClass = computed(() => {
+      if (size.value === "") return "";
+
+      return `sl-toggle-button-${size.value}`;
+    });
+
+    function onClicked(e: MouseEvent) {
+      if (isDisabled.value) return;
+
+      emit("click", e);
+    }
+
+    return {
+      sizeClass,
+      onClicked,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sl-toggle-button
+  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-bg rounded text-base text-primary-hover
+
+  &.sl-toggle-button-sm
+    @apply s('h-[29px]') px-1 py-0 text-sm
+
+    .icon
+      @apply text-lg leading-none
+
+  &.active
+    @apply bg-primary-hover text-white
+
+  &.disabled
+    @apply bg-cancel text-white cursor-default
+</style>