@pubinfo/core 2.0.0-beta.1

package/src/layout/ui-kit/HDialog.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import CarbonClose from '~icons/carbon/close';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    appear?: boolean
+    title?: string
+    preventClose?: boolean
+    overlay?: boolean
+  }>(),
+  {
+    modelValue: false,
+    appear: false,
+    preventClose: false,
+    overlay: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  'close': []
+}>();
+
+const slots = useSlots();
+
+const overlayTransitionClass = ref({
+  enter: 'ease-in-out duration-500',
+  enterFrom: 'opacity-0',
+  enterTo: 'opacity-100',
+  leave: 'ease-in-out duration-500',
+  leaveFrom: 'opacity-100',
+  leaveTo: 'opacity-0',
+});
+
+const transitionClass = computed(() => {
+  return {
+    enter: 'ease-out duration-300',
+    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    leave: 'ease-in duration-200',
+    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+  };
+});
+
+const isOpen = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+function close() {
+  isOpen.value = false;
+  emit('close');
+}
+</script>
+
+<template>
+  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+    <Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
+      <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
+        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
+      </TransitionChild>
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm:max-w-lg dark:bg-stone-8">
+              <div
+                flex="~ items-center justify-between"
+                px-4
+                py-3
+                border-b="~ solid stone/15"
+                text-6
+              >
+                <DialogTitle
+                  m-0
+                  text-lg
+                  text-dark
+                  dark:text-white
+                >
+                  {{ title }}
+                </DialogTitle>
+                <CarbonClose cursor-pointer @click="close" />
+              </div>
+              <DialogDescription m-0 overflow-y-auto p-4>
+                <slot />
+              </DialogDescription>
+              <div
+                v-if="!!slots.footer"
+                flex="~ items-center justify-end"
+                px-4
+                py-3
+                border-t="~ solid stone/15"
+              >
+                <slot name="footer" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/src/layout/ui-kit/HDivider.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HDivider',
+});
+
+const props = defineProps<{
+  title: string
+}>();
+</script>
+
+<template>
+  <div w-full>
+    <div class="divider">
+      <div class="divider-card">
+        {{ props.title }}
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.divider {
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    my-4
+    whitespace-nowrap
+    text-sm
+    font-500;
+
+  &::before,
+  &::after {
+    --at-apply:
+      content-empty
+      w-full
+      h-1px
+      bg-stone-2
+      dark:bg-stone-6;
+  }
+
+  .divider-card {
+    padding: 5px 10px;
+
+    // --at-apply:
+    //   rounded-md
+    //   bg-#409EFF
+    //   dark:bg-blue;
+  }
+}
+</style>

package/src/layout/ui-kit/HDropdown.vue

@@ -0,0 +1,13 @@
+<template>
+  <VDropdown
+    :triggers="['click']"
+    :popper-triggers="['hover']"
+    :delay="200"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template #popper>
+      <slot name="dropdown" />
+    </template>
+  </VDropdown>
+</template>

package/src/layout/ui-kit/HDropdownMenu.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+
+const props = defineProps<{
+  items: {
+    icon?: string
+    label: string
+    disabled?: boolean
+    hide?: boolean
+    handle?: () => void
+  }[][]
+}>();
+
+const myItems = computed(() => {
+  return props.items.map((item) => {
+    return item.filter(v => !v.hide);
+  }).filter(v => v.length);
+});
+</script>
+
+<template>
+  <VMenu
+    :triggers="['click']"
+    :popper-triggers="['hover']"
+    v-bind="$attrs"
+    :delay="0"
+    :auto-hide="false"
+  >
+    <slot />
+    <template #popper>
+      <div
+        v-for="(item, index) in myItems"
+        :key="index"
+        class="p-1 dark:bg-[var(--g-container-bg)]"
+        border-b="~ solid stone-2 dark:stone-7 last:size-0"
+      >
+        <button
+          v-for="(v, i) in item"
+          :key="i"
+          :disabled="v.disabled"
+          class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
+          @click="v.handle"
+        >
+          <PubinfoIcon v-if="v.icon" :name="v.icon" />
+          {{ v.label }}
+        </button>
+      </div>
+    </template>
+  </VMenu>
+</template>

package/src/layout/ui-kit/HDropdownTree.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+
+defineOptions({
+  name: 'HDropdownTree',
+});
+
+withDefaults(
+  defineProps<{
+    item?: Item
+    level?: number
+    disabled?: boolean
+  }>(),
+  {
+    level: 0,
+  },
+);
+
+const emit = defineEmits(['select']);
+
+interface Item {
+  title: string
+  children?: Item[]
+}
+</script>
+
+<template>
+  <VMenu
+    instant-move
+    :triggers="['click']"
+    :disabled="disabled || !item?.children?.length"
+    :distance="0"
+    :skidding="-5"
+    :delay="{ show: 0, hiden: 2000 }"
+    theme="dropdown-tree"
+    v-bind="$attrs"
+  >
+    <div class="dark:bg-[var(--g-container-bg)]" :class="{ 'px-1': level !== 0 }">
+      <button
+        class="w-full flex items-center justify-between gap-2 border-size-0 rounded-md bg-inherit text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50"
+        :class="[
+          level === 0 ? 'px-1.5 py-1' : 'px-2 py-1.5',
+          { 'cursor-pointer hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9': !disabled },
+        ]"
+        @click="emit('select', item)"
+      >
+        <slot>
+          <span>
+            {{ item?.title }}
+          </span>
+          <PubinfoIcon
+            v-if="item?.children?.length"
+            name="i-material-symbols-chevron-right"
+          />
+        </slot>
+      </button>
+    </div>
+
+    <template #popper>
+      <div class="py-1">
+        <HDropdownTree
+          v-for="(node) in item?.children"
+          :key="node.title"
+          :item="node"
+          :level="level + 1"
+          placement="right-start"
+          style="display: block;"
+          @select="(n) => emit('select', n)"
+        />
+      </div>
+    </template>
+  </VMenu>
+</template>
+
+<style>
+.v-popper--theme-dropdown-tree .v-popper__arrow-container {
+  display: none !important;
+}
+</style>

package/src/layout/ui-kit/HInput.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    modelValue: string
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+}>();
+
+const inputRef = ref();
+
+function handleInput(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value);
+}
+
+defineExpose({
+  ref: inputRef,
+});
+</script>
+
+<template>
+  <div class="relative w-full lg:w-48">
+    <input
+      ref="inputRef"
+      type="text"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5"
+      @input="handleInput"
+    >
+  </div>
+</template>

package/src/layout/ui-kit/HKbd.vue

@@ -0,0 +1,33 @@
+<!--
+ * @Description:
+ * @Author: wsy
+ * @Date: 2023-11-20 09:08:32
+ * @LastEditTime: 2023-12-04 18:31:56
+ * @LastEditors: wsy
+-->
+<template>
+  <kbd
+    mr-4px
+    h-6
+    min-w-24px
+    inline-flex
+    items-center
+    justify-center
+    rounded
+    bg-stone-1
+    px-1
+    text-12px
+    text-dark
+    font-medium
+    font-sans
+    ring-1
+    ring-stone-3
+    ring-inset
+    last:mr-0
+    dark:bg-dark-9
+    dark:text-white
+    dark:ring-stone-7
+  >
+    <slot />
+  </kbd>
+</template>

package/src/layout/ui-kit/HSelect.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import CarbonChevronSortDown from '~icons/carbon/chevron-sort-down';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number | undefined
+    options: {
+      label: string | number
+      value: string | number
+      disabled?: boolean
+    }[]
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number]
+}>();
+
+const selected = computed({
+  get() {
+    return props.options.find(option => option.value === props.modelValue) ?? props.options[0];
+  },
+  set(val) {
+    emit('update:modelValue', val.value);
+  },
+});
+</script>
+
+<template>
+  <VMenu
+    :triggers="['click']"
+    :popper-triggers="['click']"
+    :delay="0"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <div class="w-full inline-flex">
+      <button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg:w-48 disabled:cursor-not-allowed dark:bg-dark focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary" :disabled="disabled">
+        <span class="block truncate">
+          {{ selected.label }}
+        </span>
+        <span class="pointer-events-none absolute end-0 inset-y-0 flex items-center pe-2.5">
+          <CarbonChevronSortDown class="h-5 w-5 flex-shrink-0 text-stone-5" />
+        </span>
+      </button>
+    </div>
+    <template #popper>
+      <div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg:w-48 focus:outline-none">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          :disabled="option.disabled"
+          class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled:cursor-not-allowed hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9"
+          :class="{ 'font-bold': modelValue === option.value }"
+          @click="selected = option"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </template>
+  </VMenu>
+</template>

package/src/layout/ui-kit/HSlideover.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import CarbonClose from '~icons/carbon/close';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    appear?: boolean
+    side?: 'left' | 'right'
+    title?: string
+    preventClose?: boolean
+    overlay?: boolean
+  }>(),
+  {
+    modelValue: false,
+    appear: false,
+    side: 'right',
+    preventClose: false,
+    overlay: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  'close': []
+}>();
+
+const slots = useSlots();
+
+const overlayTransitionClass = ref({
+  enter: 'ease-in-out duration-500',
+  enterFrom: 'opacity-0',
+  enterTo: 'opacity-100',
+  leave: 'ease-in-out duration-500',
+  leaveFrom: 'opacity-100',
+  leaveTo: 'opacity-0',
+});
+
+const transitionClass = computed(() => {
+  return {
+    enter: 'transform transition ease-in-out duration-300',
+    leave: 'transform transition ease-in-out duration-200',
+    enterFrom: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
+    enterTo: 'translate-x-0',
+    leaveFrom: 'translate-x-0',
+    leaveTo: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
+  };
+});
+
+const isOpen = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+function close() {
+  isOpen.value = false;
+  emit('close');
+}
+</script>
+
+<template>
+  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+    <Dialog class="fixed inset-0 z-1000 flex" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
+      <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
+        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
+      </TransitionChild>
+      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+        <DialogPanel
+          relative
+          max-w-md
+          w-full
+          w-screen
+          flex
+          flex-1
+          flex-col
+          bg-white
+          dark:bg-stone-8
+          focus:outline-none
+        >
+          <div
+            flex="~ items-center justify-between"
+            p-4
+            border-b="~ solid stone/15"
+            text-6
+          >
+            <DialogTitle
+              m-0
+              text-lg
+              text-dark
+              dark:text-white
+            >
+              {{ title }}
+            </DialogTitle>
+            <CarbonClose cursor-pointer @click="close" />
+          </div>
+          <DialogDescription m-0 flex-1 of-y-hidden>
+            <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full p-4">
+              <slot />
+            </OverlayScrollbarsComponent>
+          </DialogDescription>
+          <div
+            v-if="!!slots.footer"
+            flex="~ items-center justify-end"
+            px-3
+            py-2
+            border-t="~ solid stone/15"
+          >
+            <slot name="footer" />
+          </div>
+        </DialogPanel>
+      </TransitionChild>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/src/layout/ui-kit/HTabList.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts" generic="T">
+import { Tab, TabGroup, TabList } from '@headlessui/vue';
+
+const props = defineProps<{
+  modelValue: T
+  options: {
+    label: any
+    value: T
+  }[]
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [T]
+  'change': [T]
+}>();
+
+const selectedIndex = computed({
+  get() {
+    return props.options.findIndex(option => option.value === props.modelValue);
+  },
+  set(val) {
+    emit('update:modelValue', props.options[val].value);
+  },
+});
+
+watch(() => props.modelValue, (val) => {
+  emit('change', val);
+});
+
+function handleChange(index: number) {
+  emit('update:modelValue', props.options[index].value);
+}
+</script>
+
+<template>
+  <TabGroup :selected-index="selectedIndex" class="bg-red" @change="handleChange">
+    <TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark:bg-stone-9 dark:ring-stone-8">
+      <Tab
+        v-for="(option, index) in options"
+        :key="index"
+        v-slot="{ selected }"
+        as="template"
+      >
+        <button
+          class="w-full inline-flex items-center justify-center truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8"
+          :class="{
+            'cursor-default bg-white dark:bg-[var(--g-container-bg)]': selected,
+            'cursor-pointer opacity-50 transition hover:(opacity-100)': !selected,
+          }"
+        >
+          {{ option.label }}
+        </button>
+      </Tab>
+    </TabList>
+  </TabGroup>
+</template>