@mptw/skylens-ui 1.4.109 → 1.5.1

package/components/SLNotification.vue

@@ -1,151 +0,0 @@
-<template lang="pug">
-  Transition(
-    @before-enter='onBeforeEnter',
-    @enter='onEnter',
-    @after-enter='onAfterEnter',
-    @enter-cancelled='onAfterEnter',
-    @before-leave='onBeforeLeave',
-    @leave='onLeave',
-    @after-leave='onAfterLeave',
-    @leave-cancelled='onAfterLeave',
-  )
-    .notification(v-if='isShow')
-      .notification-wrapper {{ content }}
-  </template>
-  
-  <script lang="ts">
-  import gsap from 'gsap';
-  
-  export default defineComponent({
-    name: 'SLNotification',
-    props: {
-      isShow: {
-        type: Boolean,
-        default: false,
-      },
-      content: {
-        type: String,
-        default: '',
-      },
-    },
-    emits: ['update:isShow'],
-    setup(props, { emit }) {
-      const { isShow } = toRefs(props);
-  
-      let timeoutId: any = null;
-  
-      function onBeforeEnter(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 0
-          });
-        }
-      }
-  
-      function onEnter(el: Element, done: () => void) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.to(wrapperEl, {
-            alpha: 1,
-            duration: 0.3,
-            onComplete: () => {
-              done();
-            }
-          })
-        } else {
-          done();
-        }
-      }
-  
-      function onAfterEnter(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 1
-          });
-        }
-      }
-  
-      function onBeforeLeave(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 1
-          });
-        }
-      }
-  
-      function onLeave(el: Element, done: () => void) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.to(wrapperEl, {
-            alpha: 0,
-            duration: 0.3,
-            onComplete: () => {
-              done();
-            }
-          })
-        } else {
-          done();
-        }
-      }
-  
-      function onAfterLeave(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 0
-          });
-        }
-      }
-  
-      function delayHide() {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = null;
-  
-        timeoutId = setTimeout(() => {
-          emit('update:isShow', false);
-        }, 2000);
-      }
-  
-      watch(isShow, () => {
-        if (isShow.value) {
-          delayHide();
-        }
-      });
-  
-      onBeforeUnmount(() => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = null;
-      })
-  
-      return {
-        onBeforeEnter,
-        onEnter,
-        onAfterEnter,
-        onBeforeLeave,
-        onLeave,
-        onAfterLeave,
-      };
-    },
-  });
-  </script>
-  
-  <style lang="stylus">
-  .notification
-    @apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
-  
-    &-wrapper
-      @apply absolute s('top-1/2') s('left-1/2') p-4 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2') shadow-popup-sm
-  </style>

package/components/SLRadioGroup.vue

@@ -1,209 +0,0 @@
-<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/utils";
-import type IInputOption from "~ui/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 lang="stylus">
-.radio-group
-  @apply inline-flex s('p-0.5') bg-primary-100 border border-primary-200 rounded
-
-  &.radio-group--sm
-    .radio
-      label
-        @apply px-2 s('py-1.5')
-
-  &.radio-group--xs
-    .radio
-      label
-        @apply px-4 s('py-0.5') text-sm
-
-  &.radio-group--xxs
-    @apply s('p-0.75')
-
-    .radio
-      label
-        @apply px-2 s('py-0.75') text-sm
-
-  &.radio-group--3xs
-    @apply s('p-0.75')
-
-    .radio
-      label
-        @apply px-2 py-px text-sm
-
-  &.radio-group--third-600
-    @apply bg-third-600 border-third-500
-
-    .radio
-      label
-        @apply bg-third-600 text-white
-
-      input:checked + .element-with-title
-        label
-          @apply text-third
-
-  &.radio-group--edit
-    @apply bg-edit border-primary
-
-    &.color-invert
-      @apply bg-card-lightpr-bg border-primary-300
-
-      .radio
-        label
-          @apply bg-card-lightpr-bg text-primary-600
-
-        input:checked + .element-with-title
-          label
-            @apply bg-edit text-white
-
-    .radio
-      label
-        @apply bg-edit text-white
-
-      input:checked + .element-with-title
-        label
-          @apply text-primary
-
-  &.radio-group--insight-title
-    @apply bg-primary-100 border-primary-100
-
-    &.color-invert
-      @apply bg-card-lightpr-bg border-primary-300
-
-      .radio
-        label
-          @apply bg-card-lightpr-bg text-primary-600
-
-        input:checked + .element-with-title
-          label
-            @apply bg-edit text-white
-
-    .radio
-      label
-        @apply bg-primary-100 text-primary
-
-      input:checked + .element-with-title
-        label
-          @apply bg-insight-title text-white
-
-  &.disabled
-    @apply bg-pgray-6 border-pgray-6
-
-  .radio
-    @apply relative inline-flex
-
-    input
-      @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
-
-    label
-      @apply inline-flex justify-center items-center relative px-3 s('py-1.25') bg-primary-100 rounded text-base leading-normal text-primary-600 cursor-pointer transition
-
-    input:checked + .element-with-title
-      label
-        @apply bg-white text-primary shadow
-
-    input:disabled + .element-with-title
-      label
-        @apply bg-pgray-6 text-pgray-4 cursor-default
-</style>