@mptw/skylens-ui 1.0.0

package/components/SLPageModal.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+div(v-if="show")
+  .page-modal-backdrop
+  .page-modal.custom-scrollbar-y(
+      ref="modalEl"
+    )
+      .modal-dialog
+        slot
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLPageModal",
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { show } = toRefs(props);
+
+    const modalEl = shallowRef<HTMLElement | null>(null);
+    const modalScrollbarEl = shallowRef<HTMLElement | null>(null);
+
+    watch(show, () => {
+      const body = document.querySelector("body");
+      if (!body) return;
+
+      if (show.value) {
+        body.classList.add("popup");
+      } else {
+        body.classList.remove("popup");
+      }
+    });
+
+    onBeforeUnmount(() => {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+    });
+
+    return {
+      modalEl,
+      modalScrollbarEl,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.page-modal-backdrop
+  @apply fixed top-0 left-0 w-full h-full s('bg-white/70') backdrop-blur-8
+
+.page-modal
+  @apply fixed top-0 left-0 w-full h-full overflow-auto
+
+  .modal-dialog
+    @apply flex items-center justify-center relative m-8 rounded-lg bg-white shadow-popup-lg overflow-hidden
+    width calc(100% - theme('spacing.8') * 2)
+    height calc(100% - theme('spacing.8') * 2)
+</style>

package/components/SLPagination.vue

@@ -0,0 +1,192 @@
+<template lang="pug">
+.pagination
+  .pagination-info(v-if="showInfo")
+    span 每頁
+    SLSelect(
+      size='sm'
+      placeholder=''
+      :modelValue='perPage'
+      :options='perPageOptions'
+      placement='bottom'
+      @update:modelValue='onChangedPerPage'
+    )
+    span 筆， 共 {{ total }} 筆
+  .pagination-items
+    a(
+        v-if="page > 1 && total > 0 && totalPages > 5"
+        href="javascript:;"
+        @click="gotoPage(1)"
+      ).pagination-item.pagination-item--icon
+      SLIcon(icon="angle-double-left")
+    a(
+        v-if="page > 1 && total > 0"
+        href="javascript:;"
+        @click="backwardPage"
+      ).pagination-item.pagination-item--icon
+      SLIcon(icon="chevron-left")
+    a(
+        v-for="item, i in pageItems"
+        href="javascript:;"
+        :class="{ active: page === item, more: item === '...' }"
+        :key="`${item}${i + 1}`"
+        @click="gotoPage(item)"
+      ).pagination-item {{ item }}
+    a(
+        v-if="page < totalPages && total > 0"
+        href="javascript:;"
+        @click="forwardPage"
+      ).pagination-item.pagination-item--icon
+      SLIcon(icon="chevron-right")
+    a(
+        v-if="page < totalPages && total > 0 && totalPages > 5"
+        href="javascript:;"
+        @click="gotoPage(totalPages)"
+      ).pagination-item.pagination-item--icon
+      SLIcon(icon="angle-double-right")
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLPagination",
+  components: {},
+  props: {
+    total: {
+      type: Number,
+      default: 0,
+    },
+    perPage: {
+      type: Number,
+      default: 8,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    showInfo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:page", "update:perPage"],
+  setup(props, { emit }) {
+    const { total, perPage, page } = toRefs(props);
+
+    const basePerPage = perPage.value;
+
+    const totalPages = computed(() => {
+      return Math.ceil(total.value / perPage.value);
+    });
+    const pageItems = computed(() => {
+      const items = [];
+      let from = 0;
+      let to = 0;
+      if (page.value >= 3) {
+        items.push("...");
+      }
+
+      if (page.value - 1 <= 0) {
+        from = 1;
+        to = Math.min(3, totalPages.value);
+      } else if (page.value + 1 > totalPages.value) {
+        from = Math.max(1, page.value - 2);
+        to = page.value;
+      } else {
+        from = Math.max(1, page.value - 1);
+        to = Math.min(totalPages.value, page.value + 1);
+      }
+
+      for (let i = from; i <= to; i += 1) {
+        items.push(i);
+      }
+
+      if (totalPages.value - page.value >= 2) {
+        items.push("...");
+      }
+      return items;
+    });
+    const perPageOptions = computed(() => [
+      { label: basePerPage, value: basePerPage },
+      { label: basePerPage * 2, value: basePerPage * 2 },
+      { label: basePerPage * 4, value: basePerPage * 4 },
+    ]);
+
+    function gotoPage(newPage: number | string) {
+      if (typeof newPage !== "number") {
+        return;
+      }
+
+      emit("update:page", newPage);
+    }
+
+    function backwardPage() {
+      gotoPage(page.value - 1);
+    }
+
+    function forwardPage() {
+      gotoPage(page.value + 1);
+    }
+
+    function onChangedPerPage(newPerPage: number) {
+      emit("update:perPage", newPerPage);
+    }
+
+    return {
+      totalPages,
+      pageItems,
+      perPageOptions,
+      gotoPage,
+      backwardPage,
+      forwardPage,
+      onChangedPerPage,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.pagination
+  @apply flex items-center justify-end
+
+  &-info
+    @apply inline-flex items-center mr-4 s('space-x-0.5') text-base text-gray-2
+
+    .custom-select
+      @apply s('min-w-[2.3125rem]')
+
+      .form-control
+        label
+          @apply text-center
+
+          .icon
+            @apply hidden
+
+      .select-options
+        .option-list
+          .option-button
+            @apply s('min-w-0') text-center
+
+  &-items
+    @apply inline-flex items-center
+
+  &-item + &-item
+    @apply border-l
+
+  &-item
+    @apply inline-flex items-center justify-center s('min-w-[1.5rem]') s('min-h-[1.5rem]') p-1 border-t border-b border-primary bg-white text-xs text-primary
+    @apply s('hover:text-primary-hover') s('focus:text-primary')
+
+    &--icon
+      @apply s('py-1.5')
+
+    &:first-child
+      @apply border-l rounded-l-sm
+
+    &:last-child
+      @apply border-r rounded-r-sm
+
+    &.active
+      @apply bg-primary text-white
+
+    &.more
+      @apply cursor-default s('hover:text-primary-hover')
+</style>

package/components/SLPillCheckbox.vue

@@ -0,0 +1,207 @@
+<template lang="pug">
+.pill-checkbox(:class="pillClass")
+  input(
+      type="checkbox"
+      :id="uid"
+      :checked="isChecked"
+      :value="value"
+      :disabled="disabled"
+      @change="onChanged"
+    )
+  label(:for="uid")
+    span {{ label }}
+    SLIcon(v-if="icon" :icon="icon")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { isEqual } from "lodash-es";
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLPillCheckbox",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [Number, String, Boolean, Object] as PropType<
+        number | string | boolean | object
+      >,
+      default: true,
+    },
+    modelValue: {
+      type: [Number, String, Boolean, Array] as PropType<
+        number | string | boolean | Array<any>
+      >,
+      default: false,
+    },
+    trueValue: {
+      type: [Number, String, Boolean] as PropType<number | string | boolean>,
+      default: true,
+    },
+    falseValue: {
+      type: [Number, String, Boolean] as PropType<number | string | boolean>,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "xs"].includes(value),
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: (value: string) =>
+        [
+          "",
+          "third",
+          "third-7",
+          "primary",
+          "primary-hover",
+          "secondary-line",
+          "blue-1",
+          "blue-2",
+          "secondary-new-300",
+        ].includes(value),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { size, color, modelValue, value, trueValue, falseValue, disabled } =
+      toRefs(props);
+
+    const uid = ref<string | undefined>(undefined);
+
+    const pillClass = computed(() => {
+      const classes = [];
+      if (size.value && size.value !== "") {
+        classes.push(`pill-checkbox-${size.value}`);
+      }
+
+      if (color.value && color.value !== "") {
+        classes.push(`pill-checkbox-${color.value}`);
+      }
+      return classes.join(" ");
+    });
+    const isChecked = computed(() => {
+      if (Array.isArray(modelValue.value)) {
+        let found = false;
+        modelValue.value.forEach((v) => {
+          if (isEqual(v, value.value)) {
+            found = true;
+          }
+        });
+        return found;
+      }
+      return modelValue.value === trueValue.value;
+    });
+
+    function onChanged(e: Event) {
+      if (disabled.value) {
+        return;
+      }
+
+      const isChecked = (e.target as HTMLInputElement).checked;
+
+      if (Array.isArray(modelValue.value)) {
+        let newValue = [...modelValue.value];
+
+        if (isChecked) {
+          newValue.push(value.value);
+        } else {
+          newValue = newValue.filter((v) => v !== value.value);
+        }
+
+        emit("update:modelValue", newValue);
+      } else {
+        emit(
+          "update:modelValue",
+          isChecked ? trueValue.value : falseValue.value
+        );
+      }
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      uid,
+      pillClass,
+      isChecked,
+      onChanged,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.pill-checkbox
+  @apply inline-block relative
+
+  &.pill-checkbox-xs
+    label
+      @apply py-px text-xs
+
+  &.pill-checkbox-third
+    input:checked + label
+      @apply bg-third border-third
+
+  &.pill-checkbox-third-7
+    input:checked + label
+      @apply bg-third-7 border-third-7
+
+  &.pill-checkbox-primary
+    input:checked + label
+      @apply bg-primary border-primary
+
+  &.pill-checkbox-primary-hover
+    input:checked + label
+      @apply bg-primary-hover border-primary-hover
+
+  &.pill-checkbox-secondary-line
+    input:checked + label
+      @apply bg-secondary-line border-secondary-line
+
+  &.pill-checkbox-blue-1
+    input:checked + label
+      @apply bg-blue-1 border-blue-1
+
+  &.pill-checkbox-blue-2
+    input:checked + label
+      @apply bg-blue-2 border-blue-2
+
+  &.pill-checkbox-secondary-new-300
+    input:checked + label
+      @apply bg-secondary-new-300 border-secondary-new-300
+
+  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 s('px-1.75') s('py-0.75')
+    @apply bg-white border border-primary-lighter rounded-full text-sm s('leading-4.75') text-gray-2 align-top cursor-pointer
+
+    .icon
+      @apply hidden ml-2
+
+  input:checked + label
+    @apply bg-white border-white text-white font-bold
+
+    .icon
+      @apply inline-block
+
+  input:disabled + label
+    @apply bg-white border-cancel text-gray-4 font-normal cursor-default
+</style>

package/components/SLPillLabel.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+label.pill-label(:class="pillClass")
+  span {{ label }}
+  SLIcon(v-if="icon" :icon="icon")
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLPillLabel",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "sm", "xs"].includes(value),
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: (value: string) =>
+        [
+          "",
+          "third",
+          "third-7",
+          "primary",
+          "primary-hover",
+          "secondary-line",
+          "blue-1",
+          "blue-2",
+          "white",
+        ].includes(value),
+    },
+  },
+  setup(props) {
+    const { size, color } = toRefs(props);
+
+    const pillClass = computed(() => {
+      const classes = [];
+      if (size.value && size.value !== "") {
+        classes.push(`pill-label-${size.value}`);
+      }
+
+      if (color.value && color.value !== "") {
+        classes.push(`pill-label-${color.value}`);
+      }
+      return classes.join(" ");
+    });
+
+    return {
+      pillClass,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.pill-label
+  @apply inline-flex justify-center items-center relative s('px-1.75') s('py-0.75')
+  @apply bg-white border border-white rounded-full text-sm s('leading-4.75') text-white font-bold align-top whitespace-nowrap
+
+  &.pill-label-xs
+    @apply py-px text-xs
+
+  &.pill-label-sm
+    @apply py-px text-sm
+
+  &.pill-label-white
+    @apply text-gray-2
+
+  &.pill-label-third
+    @apply bg-third border-third
+
+  &.pill-label-third-7
+    @apply bg-third-7 border-third-7
+
+  &.pill-label-primary
+    @apply bg-primary border-primary
+
+  &.pill-label-primary-hover
+    @apply bg-primary-hover border-primary-hover
+
+  &.pill-label-secondary-line
+    @apply bg-secondary-line border-secondary-line
+
+  &.pill-label-blue-1
+    @apply bg-blue-1 border-blue-1
+
+  &.pill-label-blue-2
+    @apply bg-blue-2 border-blue-2
+
+  .icon
+    @apply inline-block ml-2
+</style>

package/components/SLPopupMenuButton.vue

@@ -0,0 +1,158 @@
+<template lang="pug">
+a.popup-menu-button(
+  href='javascript:;'
+  @click='onClickedToggle'
+  ref='toggleEl'
+)
+  SLIcon(icon='three-dot-v')
+  ClientOnly
+    Teleport(to="body")
+      .buttons-popup(ref='popupEl')
+        template(
+          v-for='button, i in buttons'
+        )
+          a.menu-button(
+            href='javascript:;'
+            @click='onClickedMenuButton(button.event)'
+          )
+            SLIcon(:icon='button.icon')
+            span {{ button.name }}
+          .menu-button-splitter(v-if='(i + 1) < buttons.length')
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { fromEvent } from "rxjs";
+import { createPopper } from "@popperjs/core";
+import type { Options as PopperOptions } from "@popperjs/core";
+import type IPopupMenuButton from "~ui/interface/IPopupMenuButton";
+
+export default defineComponent({
+  name: "SLPopupMenuButton",
+  components: {},
+  props: {
+    buttons: {
+      type: Array as PropType<Array<IPopupMenuButton>>,
+      default: () => [],
+    },
+  },
+  setup(_, { emit }) {
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupEl = shallowRef<HTMLElement | null>(null);
+    const isShow = ref(false);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      isShow.value = true;
+      if (popupEl.value) {
+        popupEl.value.setAttribute("data-show", "");
+      }
+      popperInstance.setOptions((options: PopperOptions) => ({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 2],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      }));
+      popperInstance.update();
+
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (toggleEl.value && !toggleEl.value.contains(target as HTMLElement)) {
+          hide();
+        }
+      });
+    }
+
+    function hide() {
+      isShow.value = false;
+      unsubscribeClick();
+      if (popupEl.value) {
+        popupEl.value.removeAttribute("data-show");
+      }
+
+      if (popperInstance) {
+        popperInstance.setOptions((options: PopperOptions) => ({
+          modifiers: [{ name: "eventListeners", enabled: false }],
+        }));
+      }
+    }
+
+    function onClickedToggle() {
+      if (!isShow.value) {
+        show();
+      } else {
+        hide();
+      }
+    }
+
+    function onClickedMenuButton(eventType: string) {
+      emit(eventType);
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        if (toggleEl.value && popupEl.value) {
+          popperInstance = createPopper(toggleEl.value, popupEl.value, {
+            placement: "bottom-end",
+            modifiers: [{ name: "eventListeners", enabled: false }],
+          });
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      unsubscribeClick();
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+
+      popperInstance = null;
+    });
+
+    return {
+      toggleEl,
+      popupEl,
+      onClickedToggle,
+      onClickedMenuButton,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.popup-menu-button
+  @apply inline-block relative
+
+.buttons-popup
+  @apply z-60 flex-col items-stretch border border-primary-lighter rounded bg-white shadow-md hidden
+
+  &[data-show]
+    @apply flex
+
+  .menu-button
+    @apply inline-flex flex-row flex-nowrap items-center justify-center px-2 py-1 space-x-2 text-base text-primary whitespace-nowrap
+
+    &:first-child
+      @apply pt-2
+
+    &:last-child
+      @apply pb-2
+
+  .menu-button-splitter
+    @apply h-px mx-auto my-1 bg-bg
+    width calc(100% - theme("spacing.4"))
+</style>