@mptw/skylens-ui 1.0.0

package/components/SLHourRangeInput.vue

@@ -0,0 +1,211 @@
+<template lang="pug">
+.hour-range-input(
+    :class="{ inline, disabled, readonly: beReadonly }"
+  )
+  label(v-if="label")
+    span {{ label }}
+    SLElementWithTitle(title='起始時間請輸入0-23，結束時間請輸入1-24')
+      SLIcon(icon='info-circle')
+  .form-control(
+      ref="toggle"
+    )
+    .input-group(:class='{ invalid: isStartHourInvalid }')
+      input(
+        type='text'
+        :value='startHour'
+        placeholder='0'
+        :disabled='disabled'
+        @input='onInputedStart'
+      )
+      span.minutes-label : 00
+    .input-group-splitter
+    .input-group(:class='{ invalid: isEndHourInvalid }')
+      input(
+        type='text'
+        :value='endHour'
+        placeholder='24'
+        :disabled='disabled'
+        @input='onInputedEnd'
+      )
+      span.minutes-label : 00
+  .invalid-feedback(v-if='isStartHourInvalid || isEndHourInvalid') 起始時間請輸入0-23，結束時間請輸入1-24
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type IHourRange from "~ui/interface/IHourRange";
+
+export default defineComponent({
+  name: "SLHourRangeInput",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: undefined,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Object as PropType<IHourRange | null>,
+      default: null,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    beReadonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue } = toRefs(props);
+
+    const toggle = ref(null);
+    const startHour = ref(
+      modelValue.value && modelValue.value.start !== null
+        ? modelValue.value.start
+        : ""
+    );
+    const endHour = ref(
+      modelValue.value && modelValue.value.end !== null
+        ? modelValue.value.end
+        : ""
+    );
+    const isStartHourInvalid = ref(false);
+    const isEndHourInvalid = ref(false);
+
+    function onInputedStart(e: Event) {
+      startHour.value = (e.target as HTMLInputElement).value;
+      isStartHourInvalid.value = false;
+
+      let start =
+        (e.target as HTMLInputElement).value === ""
+          ? null
+          : Number((e.target as HTMLInputElement).value);
+
+      if (start !== null && (Number.isNaN(start) || start < 0 || start > 24)) {
+        start = null;
+      }
+
+      if (start !== null && start === 24) {
+        isStartHourInvalid.value = true;
+        return;
+      }
+
+      emit("update:modelValue", {
+        start,
+        end: endHour.value === "" ? null : endHour.value,
+      });
+    }
+
+    function onInputedEnd(e: Event) {
+      endHour.value = (e.target as HTMLInputElement).value;
+      isEndHourInvalid.value = false;
+
+      let end =
+        (e.target as HTMLInputElement).value === ""
+          ? null
+          : Number((e.target as HTMLInputElement).value);
+
+      if (end !== null && (Number.isNaN(end) || end < 0 || end > 24)) {
+        end = null;
+      }
+
+      if (end !== null && end === 0) {
+        isEndHourInvalid.value = true;
+        return;
+      }
+
+      emit("update:modelValue", {
+        start: startHour.value === "" ? null : startHour.value,
+        end,
+      });
+    }
+
+    watch(modelValue, () => {
+      startHour.value = "";
+      endHour.value = "";
+
+      if (
+        modelValue.value &&
+        modelValue.value.start !== null &&
+        modelValue.value?.start !== undefined &&
+        !Number.isNaN(modelValue.value.start)
+      ) {
+        startHour.value = modelValue.value.start;
+      }
+
+      if (
+        modelValue.value &&
+        modelValue.value.end !== null &&
+        modelValue.value?.end !== undefined &&
+        !Number.isNaN(modelValue.value.end)
+      ) {
+        endHour.value = modelValue.value.end;
+      }
+    });
+
+    return {
+      toggle,
+      startHour,
+      endHour,
+      isStartHourInvalid,
+      isEndHourInvalid,
+      onInputedStart,
+      onInputedEnd,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.hour-range-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
+
+  &.disabled, &.readonly
+    .input-group
+      @apply border-primary-light bg-bg
+
+
+  & > label
+    @apply flex items-center mb-2 space-x-2 text-base leading-normal text-gray-2
+
+    .icon
+      @apply text-xs leading-none
+
+  .form-control
+    @apply flex items-center space-x-2
+
+  .input-group
+    @apply flex items-center flex-nowrap p-2 bg-white border border-primary-light rounded text-base space-x-1
+
+    &.invalid
+      @apply border-danger
+
+    input[type=text]
+      @apply flex-grow-0 flex-shrink-0 s('w-4.75') border-0 bg-transparent text-base text-center text-gray-2 outline-none
+
+    .minutes-label
+      @apply flex-grow-0 flex-shrink-0
+
+  .input-group-splitter
+    @apply w-4 h-px bg-primary
+
+  .invalid-feedback
+    @apply mt-1 text-danger text-xs
+</style>

package/components/SLIOSSwitch.vue

@@ -0,0 +1,235 @@
+<template lang="pug">
+.ios-switch(
+  :class="[`${size === '' ? '' : `ios-switch-${size}`}`, colorClass]"
+  ref="el"
+)
+  input(
+      type="checkbox"
+      :id="uid"
+      v-model="modelProxy"
+      :true-value="trueValue",
+      :false-value="falseValue",
+    )
+  label(:for="uid" :style="`width: ${labelWidth}px;`" ref="labelEl")
+    span(ref="trueLabelEl").true-label {{ size === '' ? trueLabel : minTrueLabel }}
+    span(ref="falseLabelEl").false-label {{ size === '' ? falseLabel : minFalseLabel }}
+</template>
+
+<script lang="ts">
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLIOSSwitch",
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      default: false,
+    },
+    trueLabel: {
+      type: String,
+      default: "",
+    },
+    minTrueLabel: {
+      type: String,
+      default: "",
+    },
+    trueValue: {
+      type: [Number, String, Boolean],
+      default: true,
+    },
+    falseLabel: {
+      type: String,
+      default: "",
+    },
+    minFalseLabel: {
+      type: String,
+      default: "",
+    },
+    falseValue: {
+      type: [Number, String, Boolean],
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "min", "sm"].includes(val),
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "primary-hover"].includes(val),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, size, color } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const trueLabelEl = shallowRef<HTMLElement | null>(null);
+    const falseLabelEl = shallowRef<HTMLElement | null>(null);
+    const labelEl = shallowRef<HTMLElement | null>(null);
+    const uid = ref<string | undefined>(undefined);
+    const modelProxy = ref(modelValue.value);
+    const labelWidth = ref(23);
+
+    let timeoutId: any = null;
+    let trueLabelObserver: MutationObserver | null = null;
+    let falseLabelObserver: MutationObserver | null = null;
+
+    const colorClass = computed(() => {
+      if (color.value !== "") {
+        return `ios-switch-${color.value}`;
+      }
+
+      return "";
+    });
+
+    async function caculateLabelWidth() {
+      await nextTick();
+
+      // 有時候會抓不到 width，所以 setTimeout 才抓取
+      timeoutId = setTimeout(() => {
+        let width = 23;
+        const elRect = el.value?.getBoundingClientRect() || null;
+        const trueLabelRect =
+          trueLabelEl.value?.getBoundingClientRect() || null;
+        const falseLabelRect =
+          falseLabelEl.value?.getBoundingClientRect() || null;
+
+        if (
+          elRect &&
+          trueLabelRect &&
+          falseLabelRect &&
+          labelEl.value &&
+          size.value !== "min"
+        ) {
+          width = Math.ceil(
+            Math.max(trueLabelRect.width, falseLabelRect.width, elRect.width)
+          );
+        }
+
+        labelWidth.value = width;
+      }, 10);
+    }
+
+    watch(modelValue, () => {
+      modelProxy.value = modelValue.value;
+    });
+    watch(modelProxy, () => {
+      emit("update:modelValue", modelProxy.value);
+    });
+    watch(size, caculateLabelWidth);
+
+    onMounted(() => {
+      uid.value = getUID();
+
+      if (trueLabelEl.value) {
+        trueLabelObserver = new MutationObserver(caculateLabelWidth);
+        trueLabelObserver.observe(trueLabelEl.value, {
+          characterData: true,
+        });
+      }
+      if (falseLabelEl.value) {
+        falseLabelObserver = new MutationObserver(caculateLabelWidth);
+        falseLabelObserver.observe(falseLabelEl.value, {
+          characterData: true,
+        });
+      }
+
+      caculateLabelWidth();
+    });
+
+    onBeforeUnmount(() => {
+      if (trueLabelObserver) {
+        trueLabelObserver.disconnect();
+      }
+      if (falseLabelObserver) {
+        falseLabelObserver.disconnect();
+      }
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+
+      trueLabelObserver = null;
+      falseLabelObserver = null;
+      timeoutId = null;
+    });
+
+    return {
+      el,
+      trueLabelEl,
+      falseLabelEl,
+      labelEl,
+      uid,
+      modelProxy,
+      labelWidth,
+      colorClass,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.ios-switch
+  @apply inline-block relative overflow-hidden
+
+  &.ios-switch-min
+    label
+      @apply min-w-0 border-2 text-sm
+      width 23px
+      height 23px
+
+      &:before
+        @apply hidden
+
+      .true-label, .false-label
+        @apply p-0
+
+  &.ios-switch-sm
+    label
+      @apply s('min-w-[52px]') s('h-[28px]') text-sm
+
+      &:before
+        @apply s('w-[20px]')
+
+      .true-label
+        @apply s('pr-[31px]')
+
+      .false-label
+        @apply s('pl-[31px]')
+
+  &.ios-switch-primary-hover
+    input:checked + label
+      @apply bg-primary-hover border-primary
+
+  input
+    @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
+
+  label
+    @apply relative min-w-full s('h-[2.3125rem]') bg-bg border border-line rounded-full text-base leading-normal align-top cursor-pointer transition-colors
+
+    &:before
+      content ''
+      @apply block absolute s('left-0.75') s('inset-y-0.75') s('w-7.25') bg-white rounded-full shadow
+
+    span
+      @apply flex items-center justify-center absolute top-0 left-0 min-w-full h-full whitespace-nowrap
+
+    .true-label
+      @apply pl-2 s('pr-[35px]') text-white opacity-0
+
+    .false-label
+      @apply s('pl-[35px]') pr-2 text-primary-hover opacity-100
+
+  input:checked + label
+    @apply bg-primary border-primary-heavy
+
+    &:before
+      @apply left-auto s('right-0.75')
+
+    .true-label
+      @apply opacity-100
+
+    .false-label
+      @apply opacity-0
+</style>

package/components/SLIcon.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+i(:class="iconClass").icon
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLIcon",
+  props: {
+    icon: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    const { icon } = toRefs(props);
+
+    const iconClass = computed(() => {
+      if (icon.value && icon.value !== "") {
+        return `icon-${icon.value}`;
+      }
+
+      return "";
+    });
+
+    return {
+      iconClass,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+i.icon
+  @apply inline-block leading-none
+</style>

package/components/SLIconButton.vue

@@ -0,0 +1,130 @@
+<template lang="pug">
+a.icon-btn(
+  href='javascript:;'
+  :class='btnClass'
+  :style='`width: ${btnWidth}px`'
+  @click.prevent='onClicked'
+  @mouseenter.prevent='onMouseEnter'
+  @mouseleave.prevent='onMouseLeave'
+)
+  SLIcon(:icon='icon')
+  .icon-btn-title(ref='titleEl') {{ title }}
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLIconButton",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => [""].includes(val),
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: (val: string) =>
+        ["", "primary", "secondary-new"].includes(val),
+    },
+    variant: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "outline"].includes(val),
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { size, color, variant } = toRefs(props);
+
+    const titleEl = shallowRef<HTMLDivElement | null>(null);
+    const btnWidth = ref(0);
+
+    const btnClass = computed(() => {
+      const btnClass = [];
+      if (size.value !== "") {
+        btnClass.push(`icon-btn--${size.value}`);
+      }
+      if (color.value !== "") {
+        btnClass.push(`icon-btn--${color.value}`);
+      }
+      if (variant.value !== "") {
+        btnClass.push(`icon-btn--${variant.value}`);
+      }
+
+      return btnClass.join(" ");
+    });
+
+    function initBtnWidth() {
+      nextTick(() => {
+        btnWidth.value = 10.5 * 2 + 16;
+      });
+    }
+
+    function onClicked() {
+      emit("click");
+    }
+
+    function onMouseEnter() {
+      if (!titleEl.value) return;
+
+      const titleRect = titleEl.value.getBoundingClientRect();
+      btnWidth.value = 10.5 * 2 + 16 + titleRect.width;
+    }
+
+    function onMouseLeave() {
+      initBtnWidth();
+    }
+
+    onMounted(() => {
+      initBtnWidth();
+    });
+
+    return {
+      titleEl,
+      btnWidth,
+      btnClass,
+      onClicked,
+      onMouseEnter,
+      onMouseLeave,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.icon-btn
+  @apply inline-flex flex-nowrap justify-start items-center s('p-[0.59375rem]') border rounded-full text-base text-white overflow-hidden transition-width duration-300
+  &:hover
+    .icon-btn-title
+      @apply opacity-100
+
+  &.icon-btn--primary
+    @apply bg-primary border-primary
+
+    &.icon-btn--outline
+      @apply text-primary
+
+  &.icon-btn--secondary-new
+    @apply bg-secondary-new border-secondary-new
+
+    &.icon-btn--outline
+      @apply text-secondary-new
+
+  &.icon-btn--outline
+    @apply bg-transparent
+
+  .icon
+    @apply flex-grow-0 flex-shrink-0
+
+  &-title
+    @apply flex-grow-0 flex-shrink-0 pl-2 opacity-0 transition-opacity duration-300
+</style>