@mptw/skylens-ui 1.0.0

package/components/SLProfileButton.vue

@@ -0,0 +1,186 @@
+<template lang="pug">
+.profile-button(ref='el')
+  a(
+      href="javascript:;"
+      @click.stop.prevent="onClickedToggle"
+      ref="toggleEl"
+    ).btn.toggle-button {{ title }}
+  ClientOnly
+    Teleport(to="body")
+      .profile-nav-popup(ref="popupEl")
+        .profile-nav-popup-body
+          a(
+              v-if="showEditProfile"
+              href="javascript:;"
+              @click="onClickedEdit"
+            ).profile-nav-item
+            SLIcon(icon="person-cog")
+            span 個人資料維護
+          .profile-nav-divider(v-if="showEditProfile")
+          a(href="javascript:;" @click="onClickedLogout").profile-nav-item
+            SLIcon(icon="sign-out-alt")
+            span 登出
+</template>
+
+<script lang="ts">
+import { fromEvent } from "rxjs";
+import { createPopper } from "@popperjs/core";
+
+export default defineComponent({
+  name: "SLProfileButton",
+  components: {},
+  props: {
+    username: {
+      type: String,
+      default: "SKYLENS",
+    },
+  },
+  emits: ["edit", "logout"],
+  setup(props, { emit }) {
+    const { username } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupEl = shallowRef<HTMLElement | null>(null);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+
+    const title = computed(() => {
+      if (username.value === "") {
+        return "";
+      }
+
+      return username.value.slice(0, 1);
+    });
+    const showEditProfile = computed(() => {
+      // return $acl.can('/application/profile/edit');
+      return true;
+    });
+
+    function onClickedToggle() {
+      if (!popupEl.value || popupEl.value.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+
+      show();
+    }
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (el.value && !el.value.contains(target as HTMLElement)) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      subscribeClick();
+      if (popupEl.value) {
+        popupEl.value.setAttribute("data-show", "");
+      }
+
+      popperInstance.setOptions({
+        strategy: "fixed",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+
+      popperInstance.update();
+    }
+
+    function hide() {
+      if (popupEl.value && popupEl.value.getAttribute("data-show") === null)
+        return;
+
+      unsubscribeClick();
+
+      if (popupEl.value) {
+        popupEl.value.removeAttribute("data-show");
+      }
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+    }
+
+    function onClickedEdit() {
+      emit("edit");
+      hide();
+    }
+
+    function onClickedLogout() {
+      emit("logout");
+      hide();
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        if (toggleEl.value && popupEl.value) {
+          popperInstance = createPopper(toggleEl.value, popupEl.value, {
+            placement: "bottom-end",
+            modifiers: [{ name: "eventListeners", enabled: false }],
+          });
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    });
+
+    return {
+      el,
+      toggleEl,
+      popupEl,
+      title,
+      showEditProfile,
+      onClickedToggle,
+      subscribeClick,
+      unsubscribeClick,
+      show,
+      hide,
+      onClickedEdit,
+      onClickedLogout,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.profile-button
+  .toggle-button
+    @apply inline-flex items-center justify-center w-10 h-10 p-0 rounded-full s('bg-primary/80') s('text-2.67xl') s('leading-9.25') text-card-primary-light font-bold
+
+.profile-nav-popup
+  @apply z-60 absolute s('min-w-[10.25rem]') p-4 border border-primary bg-bg-middle rounded shadow-popup-lg pointer-events-none invisible
+
+  &[data-show]
+    @apply visible pointer-events-auto
+
+  &-body
+    @apply flex flex-col space-y-2
+
+  .profile-nav-item
+    @apply inline-flex items-center space-x-2 text-base text-primary-hover s('hover:text-primary')
+
+  .profile-nav-divider
+    @apply w-full h-px bg-border
+</style>

package/components/SLRadioButton.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+.radio-button
+  input(
+      type="radio"
+      :id="uid"
+      :checked="isEqual(value, modelValue)"
+      :value="value"
+      :disabled="disabled"
+      @change="onChanged"
+    )
+  label(:for="uid")
+    SLIcon(icon="circle")
+    SLIcon(icon="dot-circle")
+    span(v-if="label !== ''") {{ label }}
+</template>
+
+<script lang="ts">
+import { isEqual } from "lodash-es";
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLRadioButton",
+  components: {},
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean, Object],
+      required: true,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [Number, String, Boolean, Object],
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { value } = toRefs(props);
+    const uid = ref<string | undefined>(undefined);
+
+    function onChanged() {
+      emit("update:modelValue", value.value);
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      uid,
+      isEqual,
+      onChanged,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.radio-button
+  @apply inline-block relative text-base overflow-hidden
+
+  input
+    @apply absolute s('-top-10') s('-left-10')
+
+  label
+    @apply relative inline-flex items-center text-base s('leading-4.5') text-gray-3 cursor-pointer
+
+    .icon
+      @apply hidden
+
+    span
+      @apply ml-1 text-base text-gray-2
+
+  input:not(:checked) + label
+    .icon-circle
+      @apply inline-block text-primary
+
+  input:checked + label
+    .icon-dot-circle
+      @apply inline-block text-primary
+
+  input:disabled + label
+    span
+      @apply text-gray-3
+
+    .icon-circle
+      @apply text-gray-3
+
+    .icon-dot-circle
+      @apply text-gray-3
+</style>

package/components/SLRadioButtonGroup.vue

@@ -0,0 +1,113 @@
+<template lang="pug">
+.radio-button-group(:class='{ "radio-button-group--lg": size === "lg" }')
+  label(v-if="label !== ''") {{ label }}
+  .form-control(
+      :class="{ 'is-invalid': isInvalid !== null && isInvalid, 'is-valid': isInvalid !== null && !isInvalid, inline: radioInline }"
+    )
+    SLRadioButton(
+        v-for="option, i in options"
+        v-model="modelProxy"
+        :label="option.label"
+        :value="option.value"
+        :key="i"
+        :disabled='disabled || option.disabled'
+      )
+    .invalid-feedback
+      slot(name="invalid-feedback") {{ invalidFeedback }}
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type IInputOption from "~ui/interface/IInputOption";
+
+export default defineComponent({
+  name: "SLRadioButtonGroup",
+  components: {},
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean, Object],
+      required: true,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    options: {
+      type: Array as PropType<Array<IInputOption>>,
+      default: () => [],
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    radioInline: {
+      type: Boolean,
+      default: true,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFeedback: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String as PropType<"" | "lg">,
+      default: "",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue } = toRefs(props);
+
+    const modelProxy = ref(modelValue.value);
+
+    watch(modelValue, () => {
+      modelProxy.value = modelValue.value;
+    });
+    watch(modelProxy, () => {
+      emit("update:modelValue", modelProxy.value);
+    });
+
+    return {
+      modelProxy,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.radio-button-group
+  .is-invalid
+    .invalid-feedback
+      @apply block
+
+  & > label
+    @apply mb-2 text-base text-gray-2 align-top
+
+  .form-control
+    @apply flex flex-col space-y-1
+
+    &.inline
+      @apply flex flex-row flex-wrap space-x-6 space-y-0
+
+  .invalid-feedback
+    @apply hidden text-danger text-xs
+
+  &--lg
+    .form-control
+      &.inline
+        @apply space-x-8
+
+      .radio-button
+        label
+          @apply text-sm
+
+          span
+            @apply ml-2 text-sm
+</style>

package/components/SLRadioGroup.vue

@@ -0,0 +1,201 @@
+<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"
+        )
+      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-bg border border-line rounded
+
+  &.radio-group--sm
+    .radio
+      label
+        @apply min-w-0 px-2 s('py-1.5')
+
+  &.radio-group--xs
+    .radio
+      label
+        @apply min-w-0 px-4 s('py-0.5') text-sm
+
+  &.radio-group--xxs
+    @apply s('p-0.75')
+
+    .radio
+      label
+        @apply min-w-0 px-2 s('py-0.75') text-sm
+
+  &.radio-group--3xs
+    @apply s('p-0.75')
+
+    .radio
+      label
+        @apply min-w-0 px-2 py-px text-sm
+
+  &.radio-group--third-hover
+    @apply bg-third-hover border-third
+
+    .radio
+      label
+        @apply bg-third-hover text-white
+
+      input:checked + label
+        @apply text-third-7
+
+  &.radio-group--edit-purple
+    @apply bg-edit-purple border-primary
+
+    &.color-invert
+      @apply bg-card-lightpr-bg border-primary-lighter
+
+      .radio
+        label
+          @apply bg-card-lightpr-bg text-primary-light
+
+        input:checked + label
+          @apply bg-edit-purple text-white
+
+    .radio
+      label
+        @apply bg-edit-purple text-white
+
+      input:checked + label
+        @apply text-primary
+
+  &.radio-group--insight-title
+    @apply bg-bg border-bg
+
+    &.color-invert
+      @apply bg-card-lightpr-bg border-primary-lighter
+
+      .radio
+        label
+          @apply bg-card-lightpr-bg text-primary-light
+
+        input:checked + label
+          @apply bg-edit-purple text-white
+
+    .radio
+      label
+        @apply bg-bg text-primary
+
+      input:checked + label
+        @apply bg-insight-title text-white
+
+  &.disabled
+    @apply bg-gray-6 border-gray-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 s('min-w-[4.5rem]') s('p-1.25') bg-bg rounded text-base leading-normal text-primary-hover cursor-pointer transition
+
+    input:checked + label
+      @apply bg-white text-primary shadow
+
+    input:disabled + label
+      @apply bg-gray-6 text-gray-4 cursor-default
+</style>