@mptw/skylens-ui 1.0.0

package/components/SLEyeCheckbox.vue

@@ -0,0 +1,162 @@
+<template lang="pug">
+.eye-checkbox(:class="checkboxClass")
+  input(
+      type="checkbox"
+      :id="uid"
+      :checked="isChecked"
+      :value="value"
+      :disabled="disabled"
+      @change="onChanged"
+    )
+  label(:for="uid")
+    .status-icon
+      SLIcon(icon="eye-slash")
+      SLIcon(icon="eye")
+    slot
+      span(v-if="label !== ''") {{ label }}
+</template>
+
+<script lang="ts">
+import { isEqual } from "lodash-es";
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLEyeCheckbox",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [Number, String, Boolean, Object],
+      default: true,
+    },
+    modelValue: {
+      type: [Number, String, Boolean, Array],
+      default: false,
+    },
+    trueValue: {
+      type: [Number, String, Boolean],
+      default: true,
+    },
+    falseValue: {
+      type: [Number, String, Boolean],
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "sm"].includes(value),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { disabled, size, modelValue, value, trueValue, falseValue } =
+      toRefs(props);
+
+    const uid = ref<string | undefined>(undefined);
+
+    const checkboxClass = computed(() => {
+      if (size.value === "") return "";
+
+      return `checkbox-${size.value}`;
+    });
+    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) => !isEqual(v, value.value));
+        }
+
+        emit("update:modelValue", newValue);
+      } else {
+        emit(
+          "update:modelValue",
+          isChecked ? trueValue.value : falseValue.value
+        );
+      }
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      uid,
+      checkboxClass,
+      isChecked,
+      onChanged,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.eye-checkbox
+  @apply inline-block relative text-base align-top overflow-hidden
+
+  &.checkbox-sm
+    @apply text-sm
+
+    label
+      @apply text-sm
+
+  input
+    @apply absolute s('-top-10') s('-left-10')
+
+  label
+    @apply relative inline-flex items-center text-base text-gray-2 cursor-pointer
+
+    .icon
+      @apply hidden text-primary
+
+    span
+      @apply ml-2
+
+  input:checked + label
+    .icon-eye
+      @apply inline-block
+
+  input:not(:checked) + label
+    .icon-eye-slash
+      @apply inline-block
+
+  input:not(:checked):disabled + label
+    @apply text-gray-4 cursor-default
+
+    .icon-eye-slash
+      @apply inline-block text-gray-4
+
+  input:checked:disabled + label
+    @apply text-gray-3 cursor-default
+
+    .icon-eye
+      @apply inline-block text-gray-3
+</style>

package/components/SLFileInput.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+.custom-file-input
+  .file-button(:class='{ uploaded: isUploaded }')
+    input(
+      :id='uid',
+      type='file',
+      :accept='accept',
+      @change='onFileChanged'
+      ref='input'
+    )
+    label(:for='uid') {{ uploadButtonTitle }}
+  .filename(v-if='isUploaded && filename !== ""') {{ filename }}
+</template>
+
+<script lang="ts">
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLFileInput",
+  components: {},
+  props: {
+    accept: {
+      type: String,
+      default: ".jpg, .jpeg, .png, .gif",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    const input = shallowRef<HTMLInputElement | null>(null);
+    const uid = ref<string | undefined>(undefined);
+    const isUploaded = ref(false);
+    const filename = ref("");
+
+    const uploadButtonTitle = computed(() => {
+      if (isUploaded.value) {
+        return "重新上傳";
+      }
+
+      return "選擇檔案";
+    });
+
+    function onFileChanged(e: Event) {
+      const { target } = e;
+      const file = ((target as HTMLInputElement).files || [])[0];
+
+      filename.value = file.name;
+      isUploaded.value = true;
+
+      emit("update:modelValue", file);
+
+      if (target) {
+        (target as HTMLInputElement).value = "";
+      }
+    }
+
+    function reset() {
+      if (input.value) {
+        input.value.value = "";
+      }
+      filename.value = "";
+      isUploaded.value = false;
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      input,
+      uid,
+      isUploaded,
+      filename,
+      uploadButtonTitle,
+      onFileChanged,
+      reset,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.custom-file-input
+  @apply inline-flex items-center s('space-x-3.5')
+
+  .file-button
+    @apply relative overflow-hidden
+
+    &.uploaded
+      label
+        @apply bg-white border text-primary s("hover:text-primary-hover") s("hover:bg-white")
+
+    label
+      @apply relative inline-block s("py-1.75") s("px-3.75") border border-transparent rounded bg-transparent text-base leading-normal space-x-2 cursor-pointer s("focus:outline-none")
+      @apply bg-primary border-primary text-gray s("hover:bg-primary-hover") s("hover:border-primary-hover")
+
+    input[type="file"]
+      @apply absolute top-0 left-0
+
+  .filename
+    @apply s("p-1.75") border border-primary-lighter rounded bg-bg-middle text-base text-gray-2
+</style>

package/components/SLGenderAgeSelect.vue

@@ -0,0 +1,279 @@
+<template lang="pug">
+.gender-age-select(ref="el")
+  a.toggle-button(
+    href="javascript:;"
+    ref="toggleEl"
+    @click="onToggleSelect"
+  )
+    .toggle-title {{ placeholder }}
+    SLIcon(icon="caret-down")
+  ClientOnly
+    Teleport(to="body")
+      .options-popup(ref="popupEl", :style="`min-width: ${maxPopupWidth}px`")
+        .options-block.options-block-gender
+          .options-block-header 性別
+          .options-block-body
+            .custom-scrollbar-y.max-h-full
+              .options-list
+                SLCheckbox(
+                  v-for="option in genderOptions"
+                  :label="option.label"
+                  :value="option.value"
+                  v-model="genderProxy"
+                  :key="option.value"
+                )
+        .options-divide
+        .options-block.options-block-age
+          .options-block-header 年齡
+          .options-block-body
+            .custom-scrollbar-y.max-h-full
+              .options-list
+                SLCheckbox(
+                  v-for="option in ageOptions"
+                  :label="option.label"
+                  :value="option.value"
+                  v-model="ageProxy"
+                  :key="option.value"
+                )
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { fromEvent, Subscription } from "rxjs";
+import { createPopper } from "@popperjs/core";
+import type { Instance as PopperInstance } from "@popperjs/core";
+import { AGE_RANGE_NAME } from "~ui/utils/constants";
+
+export default defineComponent({
+  name: "SLGenderAgeSelect",
+  components: {},
+  props: {
+    placement: {
+      type: String,
+      default: "bottom-start",
+    },
+    modelValue: {
+      type: Object as PropType<{ gender: string[]; age: number[] }>,
+      default: null,
+    },
+  },
+  emits: ["update:modelValue", "update:selecting"],
+  setup(props, { emit }) {
+    const { modelValue, placement } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupEl = shallowRef<HTMLElement | null>(null);
+    const isSelecting = ref(false);
+    const maxPopupWidth = ref(200);
+
+    let popperInstance: PopperInstance | null = null;
+    let clickSubscriber: Subscription | null = null;
+
+    const placeholder = computed(() => {
+      if (
+        !modelValue.value ||
+        ((!modelValue.value.gender || modelValue.value.gender.length === 0) &&
+          (!modelValue.value.age || modelValue.value.age.length === 0))
+      )
+        return "所有受眾";
+
+      return "已篩選受眾";
+    });
+    const genderOptions = computed(() => [
+      { label: "男性", value: "male" },
+      { label: "女性", value: "female" },
+    ]);
+    const ageOptions = computed(() =>
+      AGE_RANGE_NAME.map((name, i) => ({
+        label: name,
+        value: i + 1,
+      }))
+    );
+    const genderProxy = computed({
+      get: () => {
+        return modelValue.value?.gender || [];
+      },
+      set: (newValue) => {
+        emit("update:modelValue", {
+          gender: newValue,
+          age: modelValue.value?.age || [],
+        });
+      },
+    });
+    const ageProxy = computed({
+      get: () => {
+        return modelValue.value?.age || [];
+      },
+      set: (newValue) => {
+        emit("update:modelValue", {
+          gender: modelValue.value?.gender || [],
+          age: newValue,
+        });
+      },
+    });
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (
+          el.value &&
+          !el.value.contains(target as HTMLElement) &&
+          popupEl.value &&
+          !popupEl.value.contains(target as HTMLElement)
+        ) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!popupEl.value || !popperInstance) return;
+
+      if (popupEl.value) {
+        popupEl.value.setAttribute("data-show", "");
+      }
+
+      maxPopupWidth.value =
+        toggleEl.value?.getBoundingClientRect().width || 200;
+      isSelecting.value = true;
+      subscribeClick();
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+    }
+
+    function hide() {
+      if (
+        !popupEl.value ||
+        popupEl.value.getAttribute("data-show") === null ||
+        !popperInstance
+      )
+        return;
+
+      unsubscribeClick();
+
+      if (popupEl.value) {
+        popupEl.value.removeAttribute("data-show");
+      }
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+      isSelecting.value = false;
+    }
+
+    function onToggleSelect() {
+      if (!popupEl.value || popupEl.value.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+
+      show();
+    }
+
+    watch(isSelecting, () => {
+      emit("update:selecting", isSelecting.value);
+    });
+
+    onMounted(() => {
+      nextTick(() => {
+        if (toggleEl.value && popupEl.value) {
+          popperInstance = createPopper(toggleEl.value, popupEl.value, {
+            placement: "bottom-end",
+            strategy: "absolute",
+            modifiers: [{ name: "eventListeners", enabled: false }],
+          });
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    });
+
+    return {
+      el,
+      toggleEl,
+      popupEl,
+      maxPopupWidth,
+      placeholder,
+      genderOptions,
+      ageOptions,
+      genderProxy,
+      ageProxy,
+      onToggleSelect,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.gender-age-select
+  @apply relative inline-flex
+
+  .toggle-button
+    @apply inline-flex items-center justify-between w-full s('p-1.75') border border-primary-light rounded space-x-4 text-sm text-gray-2
+
+    .toggle-title
+      @apply flex-grow truncate
+
+    .icon
+      @apply flex-grow-0 flex-shrink-0 text-xs leading-none
+
+.options-popup
+  @apply z-60 absolute flex s('max-h-[196px]') s('p-2.75') bg-white border border-primary-light rounded shadow pointer-events-none invisible
+
+  &[data-show]
+    @apply pointer-events-auto visible
+
+  .options-block
+    @apply flex flex-col
+    &-gender
+      @apply flex-grow-0 flex-shrink-0
+      width 37%
+
+    &-age
+      @apply flex-grow
+
+    &-header
+      @apply s('pb-1.75') border-b border-primary text-base text-primary
+
+    &-body
+      @apply overflow-hidden
+      .options-list
+        @apply flex flex-col
+
+        .checkbox
+          label
+            @apply w-full s('py-1.5') px-2 text-sm
+            @apply s('hover:bg-bg')
+
+            span
+              @apply ml-1
+
+  .options-divide
+    @apply flex-grow-0 flex-shrink-0 w-px ml-3 s('mr-2.75') bg-gray-4
+</style>

package/components/SLHeatMap.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+.heat-map(ref="mapEl")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+const RADIUS = 30;
+
+export default defineComponent({
+  name: "SLHeatMap",
+  components: {},
+  props: {
+    latlons: {
+      type: Array as PropType<{ lat: string; lon: string }[]>,
+      default: () => [],
+    },
+    weights: {
+      type: Array as PropType<{ lat: string; lon: string; weight: number }[]>,
+      default: () => [],
+    },
+    isShowMarker: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { latlons, weights, isShowMarker } = toRefs(props);
+
+    const { $googlemapsLoader } = useNuxtApp();
+    const mapEl = shallowRef<HTMLElement | null>(null);
+
+    let map: google.maps.Map | null = null;
+    let heatmap: google.maps.visualization.HeatmapLayer | null = null;
+    let markers: google.maps.Marker[] = [];
+
+    async function loadGoogleMapsApi() {
+      if (!$googlemapsLoader) return;
+
+      await $googlemapsLoader.importLibrary("core");
+      await $googlemapsLoader.importLibrary("maps");
+      await $googlemapsLoader.importLibrary("visualization");
+
+      setupMap();
+    }
+
+    function setupMap() {
+      if (!mapEl.value) return;
+
+      if (!map) {
+        map = new google.maps.Map(mapEl.value, {
+          disableDefaultUI: true,
+          styles: [
+            {
+              featureType: "poi",
+              stylers: [{ visibility: "off" }],
+            },
+            {
+              featureType: "transit",
+              stylers: [{ visibility: "off" }],
+            },
+          ],
+        });
+      }
+
+      map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
+
+      setupHeatmapData();
+    }
+
+    function setupMarkers() {
+      const bounds = new google.maps.LatLngBounds();
+      markers.forEach((marker) => marker.setMap(null));
+      markers = [];
+
+      latlons.value.forEach((latlon) => {
+        const position = new google.maps.LatLng(
+          Number(latlon.lat),
+          Number(latlon.lon)
+        );
+        bounds.extend(position);
+
+        markers.push(
+          new google.maps.Marker({
+            position,
+            map: isShowMarker.value ? map : null,
+          })
+        );
+      });
+
+      if (map) {
+        map.fitBounds(bounds, 0);
+      }
+    }
+
+    function setupHeatmapData() {
+      if (!map || latlons.value.length === 0) return;
+
+      const heatMapData = weights.value
+        .filter((weight) => weight.weight > 0)
+        .map((weight) => ({
+          location: new google.maps.LatLng(
+            Number(weight.lat),
+            Number(weight.lon)
+          ),
+          weight: weight.weight,
+        }));
+
+      if (!heatmap) {
+        heatmap = new google.maps.visualization.HeatmapLayer({
+          radius: RADIUS,
+        });
+        heatmap.setMap(map);
+      }
+
+      heatmap.setData(heatMapData);
+    }
+
+    watch(latlons, () => {
+      setupMarkers();
+    });
+    watch(weights, () => {
+      setupHeatmapData();
+    });
+    watch(isShowMarker, () => {
+      markers.forEach((marker) => {
+        marker.setMap(isShowMarker.value ? map : null);
+      });
+    });
+
+    onMounted(() => {
+      loadGoogleMapsApi();
+    });
+
+    onBeforeUnmount(() => {
+      if (heatmap) {
+        heatmap.setMap(null);
+        heatmap = null;
+      }
+    });
+
+    return {
+      mapEl,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.heat-map
+  @apply w-full h-full
+</style>