@mptw/skylens-ui 1.4.79 → 1.4.81

package/components/SLContextMenu.vue

@@ -0,0 +1,109 @@
+<template lang="pug">
+  .sl-context-menu-avatar(ref='el')
+    ClientOnly
+      Teleport(to='body')
+        .sl-context-menu-wrapper.hidden(ref='menuWrapperEl', @mousedown='onMouseDown')
+          .sl-context-menu(ref='menuEl')
+            a.sl-context-menu-item(
+              v-for='action in actions',
+              href='javascript:;',
+              :key='action.key',
+              @click='onClickAction(action.key)',
+            ) {{ action.label }}
+</template>
+
+<script lang="ts">
+import { fromEvent, Subscription } from 'rxjs';
+
+export default defineComponent({
+  name: 'SLContextMenu',
+  props: {
+    actions: {
+      type: Array as PropType<{
+        key: string,
+        label: string,
+      }[]>,
+      default: () => [{
+        key: 'saveAs',
+        label: '另存圖檔 (.png)',
+      }, {
+        key: 'copy',
+        label: '複製圖檔',
+      }],
+    },
+  },
+  emits: ['action'],
+  setup(props, { emit }) {
+    const { actions } = toRefs(props);
+
+    const el = shallowRef<HTMLDivElement | null>(null);
+    const menuWrapperEl = shallowRef<HTMLDivElement | null>(null);
+    const menuEl = shallowRef<HTMLDivElement | null>(null);
+
+    let contextMenuSubscriber: Subscription | null = null;
+
+    function onClickAction(key: string) {
+      emit('action', key);
+      hide();
+    }
+
+    function show() {
+      menuWrapperEl.value?.classList.remove('hidden');
+    }
+
+    function hide() {
+      menuWrapperEl.value?.classList.add('hidden');
+    }
+
+    function onRightClick(e: PointerEvent) {
+      console.log(menuEl.value, actions.value);
+      if (!menuEl.value || !actions.value.length) {
+        return;
+      }
+
+      e.preventDefault();
+      menuEl.value.setAttribute('style', `top: ${e.clientY}px; left: ${e.clientX}px;`);
+      show();
+    }
+
+    function onMouseDown() {
+      hide();
+    }
+
+    onMounted(() => {
+      if (el.value && el.value.parentElement) {
+        contextMenuSubscriber = fromEvent(el.value.parentElement, 'contextmenu').subscribe((e) => {
+          onRightClick(e as PointerEvent);
+        });
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (contextMenuSubscriber) {
+        contextMenuSubscriber.unsubscribe();
+      }
+      contextMenuSubscriber = null;
+    });
+
+    return {
+      el,
+      menuWrapperEl,
+      menuEl,
+      onClickAction,
+      onMouseDown,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sl-context-menu-wrapper
+  @apply s('z-[9999]') fixed top-0 left-0 w-full h-full
+
+.sl-context-menu
+  @apply absolute border border-primary-600 rounded overflow-hidden shadow-popup-sm
+
+  &-item
+    @apply block w-auto s('min-w-[160px]') p-3 bg-white text-base text-gray-2
+    @apply s('hover:bg-primary-100') s('hover:text-primary')
+</style>

package/components/SLIOSSwitch.vue

@@ -4,12 +4,12 @@
   ref="el"
 )
   input(
-      type="checkbox"
-      :id="uid"
-      v-model="modelProxy"
-      :true-value="trueValue",
-      :false-value="falseValue",
-    )
+    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 }}
@@ -52,7 +52,7 @@ export default defineComponent({
     size: {
       type: String,
       default: "",
-      validator: (val: string) => ["", "min", "sm"].includes(val),
+      validator: (val: string) => ["", "min", "sm", "xs"].includes(val),
     },
     color: {
       type: String,
@@ -198,6 +198,19 @@ export default defineComponent({
       .false-label
         @apply s('pl-[31px]')
 
+  &.ios-switch-xs
+    label
+      @apply s('min-w-[60px]') s('h-[24px]') text-xs
+
+      &:before
+        @apply s('inset-y-0.75') s('left-0.75') s('w-[16px]') border border-primary-100 rounded-full shadow-none
+
+      .true-label
+        @apply s('pr-[27px]')
+
+      .false-label
+        @apply s('pl-[27px]')
+
   &.ios-switch-primary-600
     input:checked + label
       @apply bg-primary-600 border-primary

package/components/SLSidebarNav.vue

@@ -35,14 +35,14 @@
             v-else
           )
     .sidebar-mode-setting
-      .sidebar-mode-setting-title 模式
+      .sidebar-mode-setting-title 選單模式
       SLIOSSwitch(
         :modelValue="dark"
         trueLabel="深色"
         minTrueLabel="深"
         falseLabel="淺色"
         minFalseLabel="淺"
-        :size="closuredProxy ? 'min' : ''"
+        :size="closuredProxy ? 'min' : 'xs'"
         :color='switchColor'
         @update:modelValue="onUpdatedMode"
       )
@@ -51,7 +51,7 @@
       SLIcon(icon="chevron-right")
   .sidebar-nav-intro(ref='introEl')
     .sidebar-nav-intro-header {{ navLinkIntro ? navLinkIntro.title : '' }}
-    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : ''}}
+    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : '' }}
     .sidebar-nav-intro-footer
       SLButton(
         title='我知道了',
@@ -81,7 +81,7 @@ export default defineComponent({
     },
     config: {
       type: Array as PropType<NavConfigType>,
-        default: () => [],
+      default: () => [],
     },
     navIntros: {
       type: Array as PropType<{
@@ -116,7 +116,7 @@ export default defineComponent({
 
     function onClickedToggle() {
       if (introing.value) return;
-      
+
       closuredProxy.value = !closuredProxy.value;
     }
 
@@ -287,7 +287,7 @@ export default defineComponent({
           @apply bg-nav-color-switch-bg border-primary-600
 
           &:before
-            @apply border-2 border-primary-600 bg-primary-300
+            @apply border-primary-600 bg-primary-300
 
     .sidebar-toggle
       @apply bg-primary-900 text-white
@@ -373,19 +373,19 @@ export default defineComponent({
         @apply w-full h-px my-2 bg-primary-200
 
   .sidebar-mode-setting
-    @apply flex-grow-0 flex-shrink-0 flex items-center justify-end my-4 pr-4 s('pl-[42px]') space-x-2 text-base text-primary
+    @apply flex-grow-0 flex-shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary
 
     &-title
       @apply flex-grow-0 flex-shrink-0
 
     .ios-switch
-      @apply flex-grow
+      @apply flex-grow-0 flex-shrink-0
 
       label
         @apply border-primary-100 bg-primary-25
 
         &:before
-          @apply border-2 border-primary-100
+          @apply border-primary-100
 
   &-toggle
     @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 s('mt-2.5') bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all
@@ -424,5 +424,4 @@ export default defineComponent({
       &:before
         content ''
         @apply visible
-</style>
-  
+</style>

package/package.json

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