vome-core 0.0.26 → 0.0.31

package/dist/admin/components/vm-action-btn.vue

@@ -2,7 +2,7 @@
   <button
     type="button"
     class="vm-action-btn"
-    :class="[`is-${variant}`]"
+    :class="[`is-${variant}`, `is-${size}`]"
     :disabled="disabled || loading"
     @click="emit('click', $event)"
   >
@@ -19,13 +19,15 @@ withDefaults(
     label?: string
     loadingText?: string
     icon?: string
-    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger'
+    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger' | 'outline'
+    size?: 'md' | 'sm'
     loading?: boolean
     disabled?: boolean
   }>(),
   {
     label: '',
     variant: 'default',
+    size: 'md',
     loading: false,
     disabled: false,
   },
@@ -39,37 +41,62 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 .vm-action-btn {
   display: inline-flex;
-  height: 36px;
   align-items: center;
   gap: 4px;
-  padding: 0 14px;
   border: none;
   border-radius: 12px;
   background: var(--muted);
   color: var(--foreground);
-  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
 
+  &.is-md {
+    height: 36px;
+    padding: 0 14px;
+    font-size: 13px;
+  }
+
+  &.is-sm {
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 8px;
+    font-size: 12px;
+  }
+
   &:hover:not(:disabled) {
     background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
   }
 
+  &.is-outline {
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    background: var(--card);
+
+    &:hover:not(:disabled) {
+      border-color: color-mix(in srgb, var(--brand) 40%, transparent);
+      background: var(--card);
+      color: var(--brand);
+    }
+  }
+
   &.is-primary {
+    border: 1px solid var(--brand);
     background: var(--brand);
     color: #fff;
 
     &:hover:not(:disabled) {
       background: var(--brand-deep);
+      color: #fff;
     }
   }
 
   &.is-success {
-    background: color-mix(in srgb, var(--success) 14%, var(--card));
-    color: var(--success);
+    border: 1px solid var(--success);
+    background: var(--success);
+    color: #fff;
 
     &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--success) 22%, var(--card));
+      filter: brightness(0.95);
+      color: #fff;
     }
   }
 

package/dist/admin/components/vm-aside-list-item.vue

@@ -2,7 +2,10 @@
   <button
     type="button"
     class="vm-aside-list-item"
-    :class="{ 'is-active': active }"
+    :class="{
+      'is-active': active,
+      'has-arrow': active && showArrow,
+    }"
     @click="emit('click', $event)"
   >
     <span class="vm-aside-list-item__body">
@@ -42,21 +45,26 @@ const emit = defineEmits<{
 
 <style lang="scss" scoped>
 .vm-aside-list-item {
+  position: relative;
   display: flex;
   width: 100%;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-  padding: 10px 10px 10px 12px;
+  padding: 10px 12px;
   border: none;
-  border-radius: 12px;
+  border-radius: 10px;
   background: transparent;
   text-align: left;
   cursor: pointer;
   transition: background 0.15s ease;
 
+  &.has-arrow {
+    padding-right: 28px;
+  }
+
   &:hover {
-    background: var(--muted);
+    background: color-mix(in srgb, var(--brand) 8%, transparent);
 
     .vm-aside-list-item__ops {
       opacity: 1;
@@ -71,7 +79,8 @@ const emit = defineEmits<{
       color: color-mix(in srgb, #fff 75%, transparent);
     }
 
-    :deep(.vm-aside__icon-btn) {
+    :deep(.vm-aside__icon-btn),
+    :deep(.vm-icon-btn) {
       color: #fff;
 
       &:hover:not(:disabled) {
@@ -118,7 +127,10 @@ const emit = defineEmits<{
 }
 
 .vm-aside-list-item__arrow {
-  flex-shrink: 0;
+  position: absolute;
+  top: 50%;
+  right: 8px;
   font-size: 16px;
+  transform: translateY(-50%);
 }
 </style>

package/dist/admin/components/vm-card-grid.vue

@@ -29,8 +29,9 @@ const gridStyle = computed(() => ({
 <style lang="scss" scoped>
 .vm-card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--vm-card-min), 1fr));
-  gap: var(--vm-card-gap);
+  width: 100%;
+  grid-template-columns: repeat(auto-fill, minmax(var(--vm-card-min, 280px), 1fr));
+  gap: var(--vm-card-gap, 16px);
   align-content: start;
 }
 </style>

package/dist/admin/components/vm-card-head.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="vm-card-head">
+    <div v-if="$slots.media" class="vm-card-head__media">
+      <slot name="media" />
+    </div>
+    <div v-if="$slots.tags" class="vm-card-head__tags">
+      <slot name="tags" />
+    </div>
+    <div v-if="$slots.actions" class="vm-card-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-card-head' })
+</script>
+
+<style lang="scss" scoped>
+.vm-card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.vm-card-head__media {
+  flex-shrink: 0;
+}
+
+.vm-card-head__tags {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-top: 2px;
+}
+
+.vm-card-head__actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 2px;
+}
+</style>

package/dist/admin/components/vm-card-meta.vue

@@ -0,0 +1,22 @@
+<template>
+  <p class="vm-card-meta">
+    <slot>{{ text }}</slot>
+  </p>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-card-meta' })
+
+defineProps<{
+  text?: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-card-meta {
+  margin: 8px 0 0;
+  color: var(--muted-foreground);
+  font-size: 10px;
+  line-height: 1.45;
+}
+</style>

package/dist/admin/components/vm-card-title.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="clickable ? 'button' : 'h3'"
+    class="vm-card-title"
+    :type="clickable ? 'button' : undefined"
+    :title="title"
+    @click="clickable ? emit('click', $event) : undefined"
+  >
+    <slot>{{ text }}</slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-card-title' })
+
+withDefaults(
+  defineProps<{
+    text?: string
+    title?: string
+    clickable?: boolean
+  }>(),
+  {
+    clickable: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-card-title {
+  margin: 0 0 4px;
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.vm-card-title {
+  width: 100%;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--brand);
+  }
+}
+</style>

package/dist/admin/components/vm-card.vue

@@ -1,5 +1,8 @@
 <template>
-  <article class="vm-card" :class="{ 'is-add': add }">
+  <article
+    class="vm-card"
+    :class="{ 'is-add': add, 'is-bordered': bordered, 'is-compact': compact }"
+  >
     <div v-if="$slots.toolbar" class="vm-card__toolbar">
       <slot name="toolbar" />
     </div>
@@ -7,11 +10,16 @@
       :is="add ? 'button' : 'div'"
       class="vm-card__inner"
       :type="add ? 'button' : undefined"
+      :disabled="add && disabled"
       @click="add ? emit('click', $event) : undefined"
     >
       <slot />
     </component>
-    <footer v-if="$slots.footer" class="vm-card__foot">
+    <footer
+      v-if="$slots.footer"
+      class="vm-card__foot"
+      :class="{ 'is-end': footerEnd }"
+    >
       <slot name="footer" />
     </footer>
   </article>
@@ -23,9 +31,17 @@ defineOptions({ name: 'vm-card' })
 withDefaults(
   defineProps<{
     add?: boolean
+    bordered?: boolean
+    compact?: boolean
+    footerEnd?: boolean
+    disabled?: boolean
   }>(),
   {
     add: false,
+    bordered: false,
+    compact: false,
+    footerEnd: false,
+    disabled: false,
   },
 )
 
@@ -44,11 +60,55 @@ const emit = defineEmits<{
   background: var(--card);
   box-shadow: var(--shadow-soft);
   overflow: hidden;
+  text-align: left;
+
+  &.is-bordered {
+    border: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+
+  &.is-compact {
+    min-height: 180px;
+    border-radius: 14px;
+
+    .vm-card__inner {
+      padding: 12px;
+    }
+
+    .vm-card__foot {
+      padding: 10px 12px 12px;
+    }
+  }
 
   &.is-add {
     border: 1px dashed color-mix(in srgb, var(--brand) 36%, transparent);
     background: color-mix(in srgb, var(--brand) 4%, var(--card));
     box-shadow: none;
+
+    &.is-compact {
+      min-height: 180px;
+      border-style: solid;
+      border-color: color-mix(in srgb, var(--foreground) 6%, transparent);
+      background: var(--card);
+
+      .vm-card__inner {
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        color: var(--muted-foreground);
+        font-size: 12px;
+        font-weight: 600;
+
+        i {
+          font-size: 32px;
+          line-height: 1;
+        }
+
+        &:hover {
+          border-color: color-mix(in srgb, var(--brand) 45%, transparent);
+          color: var(--brand);
+        }
+      }
+    }
   }
 }
 
@@ -86,6 +146,11 @@ const emit = defineEmits<{
     i {
       font-size: 28px;
     }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
   }
 }
 
@@ -94,7 +159,12 @@ const emit = defineEmits<{
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  margin-top: auto;
   padding: 10px 16px 14px;
   border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
+
+  &.is-end {
+    justify-content: flex-end;
+  }
 }
 </style>

package/dist/admin/components/vm-clamp-text.vue

@@ -0,0 +1,39 @@
+<template>
+  <p class="vm-clamp-text" :style="lineStyle">
+    <slot>{{ text }}</slot>
+  </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-clamp-text' })
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    lines?: number
+  }>(),
+  {
+    lines: 2,
+  },
+)
+
+const lineStyle = computed(() => ({
+  '--vm-clamp-lines': String(props.lines),
+}))
+</script>
+
+<style lang="scss" scoped>
+.vm-clamp-text {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 11px;
+  line-height: 1.5;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--vm-clamp-lines, 2);
+  line-clamp: var(--vm-clamp-lines, 2);
+}
+</style>

package/dist/admin/components/vm-icon-btn.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    type="button"
+    class="vm-icon-btn"
+    :class="[`is-${size}`, variant ? `is-${variant}` : '']"
+    :title="title"
+    :disabled="disabled || loading"
+    @click="emit('click', $event)"
+  >
+    <i :class="[icon, { 'is-spin': loading }]" aria-hidden="true" />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-icon-btn' })
+
+withDefaults(
+  defineProps<{
+    icon: string
+    title?: string
+    size?: 'md' | 'sm'
+    variant?: 'default' | 'danger'
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    size: 'md',
+    variant: 'default',
+    loading: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &.is-md {
+    width: 28px;
+    height: 28px;
+    font-size: 16px;
+  }
+
+  &.is-sm {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+
+  &.is-danger:hover:not(:disabled) {
+    background: var(--danger-soft);
+    color: var(--danger);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  i.is-spin {
+    animation: vm-icon-btn-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes vm-icon-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/admin/components/vm-inline-search.vue

@@ -0,0 +1,60 @@
+<template>
+  <label class="vm-inline-search">
+    <i class="ri-search-line" aria-hidden="true" />
+    <input
+      :value="modelValue"
+      type="search"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.enter="emit('search')"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-inline-search' })
+
+withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+  }>(),
+  {
+    modelValue: '',
+    placeholder: '搜索',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+  search: []
+}>()
+
+function onInput(e: Event) {
+  emit('update:modelValue', (e.target as HTMLInputElement).value.trim())
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-inline-search {
+  display: flex;
+  height: 36px;
+  min-width: 220px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--muted-foreground);
+
+  input {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: var(--foreground);
+    font-size: 13px;
+    outline: none;
+  }
+}
+</style>

package/dist/admin/components/vm-page-tabs.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="vm-page-tabs" :class="[`is-${variant}`]" role="tablist">
+    <button
+      v-for="tab in tabs"
+      :key="tab.key"
+      type="button"
+      role="tab"
+      class="vm-page-tabs__item"
+      :class="{ 'is-active': modelValue === tab.key }"
+      :aria-selected="modelValue === tab.key"
+      @click="emit('update:modelValue', tab.key)"
+    >
+      {{ tab.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-page-tabs' })
+
+export type PageTab = { key: string; label: string }
+
+withDefaults(
+  defineProps<{
+    modelValue: string
+    tabs: PageTab[]
+    variant?: 'pill' | 'segmented'
+  }>(),
+  {
+    variant: 'pill',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [key: string]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-page-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &.is-segmented {
+    gap: 4px;
+    padding: 4px;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--foreground) 5%, var(--card));
+
+    .vm-page-tabs__item {
+      height: 32px;
+      padding: 0 14px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+
+      &.is-active {
+        background: var(--card);
+        color: var(--brand);
+        box-shadow: var(--shadow-soft);
+      }
+    }
+  }
+}
+
+.vm-page-tabs__item {
+  height: 34px;
+  padding: 0 16px;
+  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+  border-radius: 999px;
+  background: var(--card);
+  color: var(--muted-foreground);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover:not(.is-active) {
+    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
+    color: var(--brand);
+  }
+
+  &.is-active {
+    border-color: var(--brand);
+    background: var(--brand);
+    color: #fff;
+  }
+}
+</style>