@v1nt1248/3nclient-lib 0.0.41 → 0.1.0

package/src/components/ui3n-list.vue

@@ -1,69 +1,50 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  export interface Ui3nListProps<T> {
-    title?: string;
-    sticky?: boolean;
-    items: T[];
-    disabled?: boolean;
-  }
-
-  export interface Ui3nListEmits<T> {
-    (ev: 'select', value: { value: T, index: number }): void;
-  }
-
-  export interface Ui3nListSlots<T> {
-    title?: () => any;
-    item?: ({ item, index }: { item: T, index: number }) => any;
-  }
-
-  const props = withDefaults(defineProps<Ui3nListProps<T>>(), {
-    title: '',
-    sticky: true,
-    disabled: false,
-  })
-
-
-  const emits = defineEmits<Ui3nListEmits<T>>()
-  defineSlots<Ui3nListSlots<T>>()
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Ui3nListProps<T> {
+  title?: string;
+  sticky?: boolean;
+  items: T[];
+  disabled?: boolean;
+}
+
+export interface Ui3nListEmits<T> {
+  (ev: 'select', value: { value: T, index: number }): void;
+}
+
+export interface Ui3nListSlots<T> {
+  title?: () => any;
+  item?: ({ item, index }: { item: T, index: number }) => any;
+}
+
+const props = withDefaults(defineProps<Ui3nListProps<T>>(), {
+  title: '',
+  sticky: true,
+  disabled: false,
+});
+
+const emits = defineEmits<Ui3nListEmits<T>>();
+defineSlots<Ui3nListSlots<T>>();
 </script>
 
 <template>
-  <div
-    ref="listElement"
-    class="ui3n-list"
-  >
-    <div
-      :class="[
-        'ui3n-list__title',
-        { 'ui3n-list__title--sticky': props.sticky },
-      ]"
-    >
+  <div ref="listElement" :class="$style.list">
+    <div :class="[$style.title, sticky && $style.stickyTitle]">
       <slot name="title">
-        <div
-          v-if="props.title"
-          class="ui3n-list__title-content"
-        >
-          {{ props.title }}
+        <div v-if="props.title" :class="$style.titleContent">
+          {{ title }}
         </div>
       </slot>
     </div>
 
-    <div class="ui3n-list__content">
+    <div :class="$style.content">
       <div
-        v-for="(item, index) in props.items"
+        v-for="(item, index) in items"
         :key="item.id ?? index"
-        class="ui3n-list__item"
+        :class="$style.item"
       >
-        <slot
-          name="item"
-          :item="item"
-          :index="index"
-        >
+        <slot name="item" :item="item" :index="index">
           <div
-            :class="[
-              'ui3n-list__item-content',
-              { 'ui3n-list__item-content--disabled': props.disabled },
-            ]"
+            :class="[$style.itemContent, disabled && $style.itemContentDisabled]"
             @click.stop="emits('select', { value: item, index })"
           >
             {{ item }}
@@ -74,62 +55,62 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-list {
-    --ui3n-list-item-height: 28px;
-    --ui3n-list-bg-color: var(--system-white, #fff);
-
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: var(--ui3n-list-bg-color);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-
-    &__title {
-      position: relative;
-      top: 0;
-      z-index: 1;
-
-      &--sticky {
-        position: sticky;
-      }
-    }
-
-    &__content {
-      position: relative;
-      flex-grow: 1;
-    }
-
-    &__title-content,
-    &__item {
-      position: relative;
-      width: 100%;
-      min-height: var(--ui3n-list-item-height);
-      padding: 4px 0;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-    }
-
-    &__title-content {
-      z-index: 1;
-      font-size: 16px;
-      font-weight: 600;
-      background-color: var(--ui3n-list-bg-color);
-    }
-
-    &__item-content {
-      font-size: 14px;
-      font-weight: 400;
-      cursor: pointer;
-
-      &--disabled {
-        pointer-events: none;
-        cursor: default;
-      }
-    }
-  }
+<style lang="scss" module>
+.list {
+  --ui3n-list-item-height: 28px;
+  --ui3n-list-bg-color: transparent;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.title {
+  position: relative;
+  top: 0;
+  z-index: 1;
+}
+
+.stickyTitle {
+  position: sticky;
+}
+
+.content {
+  position: relative;
+  flex-grow: 1;
+}
+
+.titleContent,
+.item {
+  position: relative;
+  width: 100%;
+  min-height: var(--ui3n-list-item-height);
+  padding: 4px 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.titleContent {
+  z-index: 1;
+  font-size: 16px;
+  font-weight: 600;
+  background-color: var(--ui3n-list-bg-color);
+}
+
+.itemContent {
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.itemContentDisabled {
+  pointer-events: none;
+  cursor: default;
+}
 </style>

package/src/components/ui3n-menu.vue

@@ -1,80 +1,78 @@
 <script lang="ts" setup>
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onMounted, ref } from 'vue'
-  import { default as vClickOutside } from '../directives/ui3n-click-outside'
-
-  export interface Ui3nMenuProps {
-    offsetX?: number;
-    offsetY?: number;
-    closeOnClick?: boolean;
-    closeOnClickOutside?: boolean;
-    disabled?: boolean;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed, onMounted, ref } from 'vue';
+import { default as vClickOutside } from '../directives/ui3n-click-outside';
+
+export interface Ui3nMenuProps {
+  offsetX?: number;
+  offsetY?: number;
+  closeOnClick?: boolean;
+  closeOnClickOutside?: boolean;
+  disabled?: boolean;
+}
+
+export interface Ui3nMenuEmits {
+  (ev: 'open'): void;
+  (ev: 'opened'): void;
+  (ev: 'close'): void;
+  (ev: 'closed'): void;
+  (ev: 'click-outside'): void;
+}
+
+export interface Ui3nMenuSlots {
+  default: () => any;
+  menu?: () => any;
+}
+
+const props = withDefaults(defineProps<Ui3nMenuProps>(), {
+  offsetX: 0,
+  offsetY: 0,
+  closeOnClick: true,
+  closeOnClickOutside: true,
+  disabled: false,
+});
+const emits = defineEmits<Ui3nMenuEmits>();
+defineSlots<Ui3nMenuSlots>();
+
+const menuElement = ref<HTMLDivElement | null>(null);
+const menuTriggerElement = ref<HTMLDivElement | null>(null);
+const isShow = ref(false);
+const defaultAnimationDuration = 400;
+const menuContentStyle = computed(() => {
+  if (!props.offsetX && !props.offsetY) {
+    return {};
   }
-
-  export interface Ui3nMenuEmits {
-    (ev: 'open'): void;
-    (ev: 'opened'): void;
-    (ev: 'close'): void;
-    (ev: 'closed'): void;
-    (ev: 'click-outside'): void;
-  }
-
-  export interface Ui3nMenuSlots {
-    default: () => any;
-    menu?: () => any;
-  }
-
-  const props = withDefaults(defineProps<Ui3nMenuProps>(), {
-    offsetX: 0,
-    offsetY: 0,
-    closeOnClick: true,
-    closeOnClickOutside: true,
-    disabled: false,
-  })
-  const emits = defineEmits<Ui3nMenuEmits>()
-  defineSlots<Ui3nMenuSlots>()
-
-  const menuElement = ref<HTMLDivElement | null>(null)
-  const menuTriggerElement = ref<HTMLDivElement | null>(null)
-  const isShow = ref(false)
-  const defaultAnimationDuration = 400
-  const menuContentStyle = computed(() => {
-    if (!props.offsetX && !props.offsetY) {
-      return {}
-    }
-    return {
-      ...(props.offsetX && { left: `${props.offsetX}px` }),
-      ...(props.offsetY && { top: `${menuTriggerElement.value!.clientHeight + props.offsetY}px` }),
-    }
-  })
-
-  onMounted(() => {
-    menuElement.value!.style.setProperty('--menu-animation-duration', `${defaultAnimationDuration}ms`)
-  })
-
-  const toggleMenu = () => {
-    isShow.value = !isShow.value
-  }
-
-  const onContentClick = () => {
-    isShow.value = false
-  }
-  const onClickOutside = () => {
-    emits('click-outside')
-    if (props.closeOnClickOutside) {
-      isShow.value = false
-    }
+  return {
+    ...(props.offsetX && { left: `${props.offsetX}px` }),
+    ...(props.offsetY && { top: `${menuTriggerElement.value!.clientHeight + props.offsetY}px` }),
+  };
+});
+
+onMounted(() => {
+  menuElement.value!.style.setProperty('--ui3n-menu-animation-duration', `${defaultAnimationDuration}ms`);
+});
+
+function toggleMenu() {
+  isShow.value = !isShow.value;
+}
+
+function onContentClick() {
+  isShow.value = false;
+}
+
+function onClickOutside() {
+  emits('click-outside');
+  if (props.closeOnClickOutside) {
+    isShow.value = false;
   }
+}
 </script>
 
 <template>
-  <div
-    ref="menuElement"
-    class="ui3n-menu"
-  >
+  <div ref="menuElement" :class="$style.menu">
     <div
       ref="menuTriggerElement"
-      class="ui3n-menu__trigger"
+      :class="$style.trigger"
       @click.stop="toggleMenu"
     >
       <slot />
@@ -92,7 +90,7 @@
         v-if="isShow"
         v-click-outside="onClickOutside"
         :style="menuContentStyle"
-        class="ui3n-menu__content"
+        :class="$style.content"
         v-on="props.closeOnClick ? { click: onContentClick } : {}"
       >
         <slot name="menu" />
@@ -101,35 +99,38 @@
   </div>
 </template>
 
+<style lang="scss" module>
+@import "../assets/styles/mixins";
+
+.menu {
+  --ui3n-menu-animation-duration: 400ms;
+  --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
+
+  position: relative;
+  overflow: visible;
+}
+
+.trigger {
+  position: relative;
+}
+
+.content {
+  position: absolute;
+  border-radius: 4px;
+  background-color: var(--ui3n-menu-content-bg);
+  z-index: 1000;
+  @include elevation(3);
+}
+</style>
+
 <style lang="scss" scoped>
-  @import "../assets/styles/mixins";
-
-  .ui3n-menu {
-    --menu-animation-duration: 400ms;
-
-    position: relative;
-    overflow: visible;
-
-    .menu-enter-active,
-    .menu-leave-active {
-      transition: opacity var(--menu-animation-duration);
-    }
-
-    .menu-enter-from,
-    .menu-leave-to {
-      opacity: 0;
-    }
-
-    &__trigger {
-      position: relative;
-    }
-
-    &__content {
-      position: absolute;
-      border-radius: 4px;
-      background-color: var(--system-white, #fff);
-      z-index: 1000;
-      @include elevation(3);
-    }
-  }
+.menu-enter-active,
+.menu-leave-active {
+  transition: opacity var(--ui3n-menu-animation-duration);
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+}
 </style>