@mptw/skylens-ui 1.2.20 → 1.3.0

package/components/SLRadioGroup.vue

@@ -110,26 +110,26 @@ export default defineComponent({
   &.radio-group--sm
     .radio
       label
-        @apply min-w-0 px-2 s('py-1.5')
+        @apply px-2 s('py-1.5')
 
   &.radio-group--xs
     .radio
       label
-        @apply min-w-0 px-4 s('py-0.5') text-sm
+        @apply 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
+        @apply 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
+        @apply px-2 py-px text-sm
 
   &.radio-group--third-hover
     @apply bg-third-hover border-third
@@ -191,7 +191,7 @@ export default defineComponent({
       @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
+      @apply inline-flex justify-center items-center relative px-3 s('py-1.25') bg-bg rounded text-base leading-normal text-primary-hover cursor-pointer transition
 
     input:checked + label
       @apply bg-white text-primary shadow

package/components/SLTextInput.vue

@@ -172,24 +172,22 @@ export default defineComponent({
     }
 
     function onInputCompositionEnd(e: CompositionEvent) {
-      const target = e.target as HTMLInputElement;
-      if (target) {
-        if (Number.isInteger(lazy.value) || lazy.value) {
-          debounceUpdateModelValue(target.value);
-        }
+      isComposing.value = false;
 
-        emit("update:modelValue", target.value);
-      }
+      updateModelValue(e);
     }
 
     function onInputedModelValue(e: Event) {
       const inputEvent = e as InputEvent;
-      if (isComposing.value && !inputEvent.isComposing) {
-        isComposing.value = false;
+      if (isComposing.value || inputEvent.isComposing) {
         return;
       }
 
-      const target = inputEvent.target as HTMLInputElement;
+      updateModelValue(e);
+    }
+
+    function updateModelValue(e: Event) {
+      const target = e.target as HTMLInputElement;
 
       if (target) {
         if (Number.isInteger(lazy.value) || lazy.value) {

package/components/SLTwoLayerSingleSelect.vue

@@ -0,0 +1,313 @@
+<template lang="pug">
+.two-layer-single-select(:class="[sizeClass]" ref="selectEl")
+  a(
+    href="javascript:;"
+    :class="{ selected: !!modelValue }"
+    @click="onClickedToggle"
+    ref="toggleEl"
+    data-cy="project-button-toggle"
+  ).toggle-button
+    span.button-title {{ placeholder }}
+    SLIcon(icon="caret-down")
+  SLTwoLayerSelect(
+    :search-placeholder='searchPlaceholder',
+    :first-layer-title='firstOptionTitle',
+    :second-layer-title='secondOptionTitle',
+    :model-value='modelValue',
+    :selected-first-layer-key='selectedFirstOption',
+    :query='queryProxy',
+    :first-layers='firstOptions',
+    :second-layers='secondOptions',
+    ref='popupComp',
+    @update:model-value="onInputedSecondOption",
+    @search="onSearch"
+    @select-first-layer="onClickedFirstOption"
+  )
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { fromEvent } from "rxjs";
+import { createPopper } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
+import { SLTwoLayerSelect } from '#components';
+
+type SLTwoLayerSelectType = InstanceType<typeof SLTwoLayerSelect>;
+
+export default defineComponent({
+  name: "SLTwoLayerSingleSelect",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["sm", ""].includes(val),
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: "bottom-start",
+    },
+    firstOptionTitle: {
+      type: String,
+      default: "",
+    },
+    secondOptionTitle: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<{
+        firstLayer: string;
+        secondLayer: string;
+      } | null>,
+      default: () => [],
+    },
+    options: {
+      type: Array as PropType<
+        {
+          key: string;
+          name: string;
+          subOptions: { key: string; name: string }[];
+        }[]
+      >,
+      default: () => [],
+    },
+    query: {
+      type: String,
+      default: '',
+    }
+  },
+  emits: ["update:modelValue", "update:selecting", 'update:query'],
+  setup(props, { emit }) {
+    const { size, options, placement, query } = toRefs(props);
+
+    const selectEl = shallowRef<HTMLElement | null>(null);
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupComp = shallowRef<SLTwoLayerSelectType | null>(null);
+    const selfQuery = ref(query.value);
+    const selectedFirstOption = ref<string | null>(null);
+    const isSelecting = ref(false);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+
+    const queryProxy = computed({
+      get() { return selfQuery.value },
+      set(newValue: string) {
+        emit('update:query', newValue);
+        selfQuery.value = newValue;
+      },
+    });
+    const sizeClass = computed(() => {
+      if (!size.value) return "";
+      return `two-layer-multi-select-${size.value}`;
+    });
+    const filteredOptions = computed(() => {
+      if (!queryProxy.value) {
+        return options.value;
+      }
+
+      const regexp = new RegExp(`[.]*${queryProxy.value}[.]*`, "ig");
+      return options.value
+        .map((option) => {
+          if (regexp.test(option.name)) {
+            return option;
+          }
+
+          return {
+            ...option,
+            subOptions: option.subOptions.filter((o) => regexp.test(o.name)),
+          };
+        })
+        .filter((option) => option.subOptions.length > 0);
+    });
+    const firstOptions = computed(() => {
+      return filteredOptions.value
+    });
+    const secondOptions = computed(() => {
+      const found = filteredOptions.value.find(
+        (option) =>
+          selectedFirstOption.value && option.key === selectedFirstOption.value
+      );
+      return found?.subOptions || [];
+    });
+
+    function onClickedFirstOption(key: string) {
+      selectedFirstOption.value = key;
+    }
+
+    function onInputedFirstOption(key: string) {
+      selectedFirstOption.value = key;
+    }
+
+    function onInputedSecondOption(newValue: {
+      firstLayer: string;
+      secondLayer: string;
+    } | null) {
+      emit("update:modelValue", newValue);
+    }
+
+    function onClearQuery() {
+      queryProxy.value = "";
+    }
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (selectEl.value && !selectEl.value.contains(target as HTMLElement)) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!popupComp.value?.$el) return;
+
+      isSelecting.value = true;
+
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.add("popup");
+      }
+
+      if (popupComp.value?.$el) {
+        popupComp.value.$el.setAttribute("data-show", "");
+      }
+      subscribeClick();
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+    }
+
+    function hide() {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") === null)
+        return;
+
+      isSelecting.value = false;
+
+      unsubscribeClick();
+
+      if (popupComp.value?.$el) {
+        popupComp.value?.$el.removeAttribute("data-show");
+      }
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+
+      queryProxy.value = "";
+    }
+
+    function onClickedToggle() {
+      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+
+      show();
+    }
+
+    function onSearch(search: string) {
+      console.log("search", search === '');
+      queryProxy.value = search;
+    }
+
+    watch(isSelecting, () => {
+      emit("update:selecting", isSelecting.value);
+    });
+
+    onMounted(() => {
+      if (!popupComp.value?.$el) return;
+
+      if (selectEl.value && popupComp.value?.$el) {
+        popperInstance = createPopper(selectEl.value, popupComp.value?.$el, {
+          placement: placement.value as Placement,
+          modifiers: [{ name: "eventListeners", enabled: false }],
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    });
+
+    return {
+      selectEl,
+      toggleEl,
+      popupComp,
+      queryProxy,
+      sizeClass,
+      selectedFirstOption,
+      firstOptions,
+      secondOptions,
+      onClickedFirstOption,
+      onInputedFirstOption,
+      onInputedSecondOption,
+      onClearQuery,
+      onClickedToggle,
+      onSearch,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.two-layer-single-select
+  @apply relative w-full
+
+  &.two-layer-single-select-sm
+    .toggle-button
+      @apply text-sm
+
+  .toggle-button
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-light rounded text-base text-gray-4
+
+    &.selected
+      @apply text-gray-2
+
+    .button-title
+      @apply flex-grow
+
+    .icon
+      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-gray-2 leading-none
+
+  .tw-layer-select
+    @apply z-10 invisible pointer-events-none
+
+    &[data-show]
+      @apply visible pointer-events-auto
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.2.20",
+  "version": "1.3.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",