vome-core 0.3.64 → 0.3.66

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

@@ -1,136 +1,136 @@
-<template>
-  <button
-    type="button"
-    class="vm-action-btn"
-    :class="[`is-${variant}`, `is-${size}`]"
-    :disabled="disabled || loading"
-    @click="emit('click', $event)"
-  >
-    <i v-if="icon" :class="[icon, { 'is-spin': loading }]" aria-hidden="true" />
-    <span>{{ loading && loadingText ? loadingText : label }}</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'vm-action-btn' })
-
-withDefaults(
-  defineProps<{
-    label?: string
-    loadingText?: string
-    icon?: string
-    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger' | 'outline'
-    size?: 'md' | 'sm'
-    loading?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    label: '',
-    variant: 'default',
-    size: 'md',
-    loading: false,
-    disabled: false,
-  },
-)
-
-const emit = defineEmits<{
-  click: [e: MouseEvent]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.vm-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: none;
-  border-radius: 12px;
-  background: var(--muted);
-  color: var(--foreground);
-  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 {
-    border: 1px solid var(--success);
-    background: var(--success);
-    color: #fff;
-
-    &:hover:not(:disabled) {
-      filter: brightness(0.95);
-      color: #fff;
-    }
-  }
-
-  &.is-brand {
-    background: color-mix(in srgb, var(--brand) 12%, var(--card));
-    color: var(--brand);
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--brand) 20%, var(--card));
-    }
-  }
-
-  &.is-danger {
-    background: var(--danger-soft);
-    color: var(--danger);
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--danger) 16%, var(--card));
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  i.is-spin {
-    animation: vm-action-spin 0.8s linear infinite;
-  }
-}
-
-@keyframes vm-action-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vm-action-btn"
+    :class="[`is-${variant}`, `is-${size}`]"
+    :disabled="disabled || loading"
+    @click="emit('click', $event)"
+  >
+    <i v-if="icon" :class="[icon, { 'is-spin': loading }]" aria-hidden="true" />
+    <span>{{ loading && loadingText ? loadingText : label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-action-btn' })
+
+withDefaults(
+  defineProps<{
+    label?: string
+    loadingText?: string
+    icon?: string
+    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger' | 'outline'
+    size?: 'md' | 'sm'
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    label: '',
+    variant: 'default',
+    size: 'md',
+    loading: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  border-radius: 12px;
+  background: var(--muted);
+  color: var(--foreground);
+  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 {
+    border: 1px solid var(--success);
+    background: var(--success);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      filter: brightness(0.95);
+      color: #fff;
+    }
+  }
+
+  &.is-brand {
+    background: color-mix(in srgb, var(--brand) 12%, var(--card));
+    color: var(--brand);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--brand) 20%, var(--card));
+    }
+  }
+
+  &.is-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--danger) 16%, var(--card));
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  i.is-spin {
+    animation: vm-action-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes vm-action-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -1,136 +1,136 @@
-<template>
-  <button
-    type="button"
-    class="vm-aside-list-item"
-    :class="{
-      'is-active': active,
-      'has-arrow': active && showArrow,
-    }"
-    @click="emit('click', $event)"
-  >
-    <span class="vm-aside-list-item__body">
-      <span class="vm-aside-list-item__title">
-        <slot />
-      </span>
-      <span v-if="subtitle || $slots.subtitle" class="vm-aside-list-item__sub">
-        <slot name="subtitle">{{ subtitle }}</slot>
-      </span>
-    </span>
-    <span v-if="$slots.ops" class="vm-aside-list-item__ops" @click.stop>
-      <slot name="ops" />
-    </span>
-    <i v-if="active && showArrow" class="ri-arrow-right-s-line vm-aside-list-item__arrow" />
-  </button>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'vm-aside-list-item' })
-
-withDefaults(
-  defineProps<{
-    active?: boolean
-    subtitle?: string
-    showArrow?: boolean
-  }>(),
-  {
-    active: false,
-    showArrow: true,
-  },
-)
-
-const emit = defineEmits<{
-  click: [e: MouseEvent]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.vm-aside-list-item {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.15s ease;
-
-  &.has-arrow {
-    padding-right: 28px;
-  }
-
-  &:hover {
-    background: color-mix(in srgb, var(--brand) 8%, transparent);
-
-    .vm-aside-list-item__ops {
-      opacity: 1;
-    }
-  }
-
-  &.is-active {
-    background: var(--brand);
-    color: #fff;
-
-    .vm-aside-list-item__sub {
-      color: color-mix(in srgb, #fff 75%, transparent);
-    }
-
-    :deep(.vm-aside__icon-btn),
-    :deep(.vm-icon-btn) {
-      color: #fff;
-
-      &:hover:not(:disabled) {
-        background: color-mix(in srgb, #fff 18%, transparent);
-      }
-
-      &.is-danger:hover:not(:disabled) {
-        background: color-mix(in srgb, #fff 22%, transparent);
-      }
-    }
-  }
-}
-
-.vm-aside-list-item__body {
-  flex: 1;
-  min-width: 0;
-}
-
-.vm-aside-list-item__title {
-  display: block;
-  font-size: 13px;
-  font-weight: 650;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.vm-aside-list-item__sub {
-  display: block;
-  margin-top: 2px;
-  font-size: 11px;
-  font-style: normal;
-  color: var(--muted-foreground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.vm-aside-list-item__ops {
-  display: inline-flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.vm-aside-list-item__arrow {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  font-size: 16px;
-  transform: translateY(-50%);
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vm-aside-list-item"
+    :class="{
+      'is-active': active,
+      'has-arrow': active && showArrow,
+    }"
+    @click="emit('click', $event)"
+  >
+    <span class="vm-aside-list-item__body">
+      <span class="vm-aside-list-item__title">
+        <slot />
+      </span>
+      <span v-if="subtitle || $slots.subtitle" class="vm-aside-list-item__sub">
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </span>
+    </span>
+    <span v-if="$slots.ops" class="vm-aside-list-item__ops" @click.stop>
+      <slot name="ops" />
+    </span>
+    <i v-if="active && showArrow" class="ri-arrow-right-s-line vm-aside-list-item__arrow" />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-aside-list-item' })
+
+withDefaults(
+  defineProps<{
+    active?: boolean
+    subtitle?: string
+    showArrow?: boolean
+  }>(),
+  {
+    active: false,
+    showArrow: true,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-aside-list-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &.has-arrow {
+    padding-right: 28px;
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--brand) 8%, transparent);
+
+    .vm-aside-list-item__ops {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    background: var(--brand);
+    color: #fff;
+
+    .vm-aside-list-item__sub {
+      color: color-mix(in srgb, #fff 75%, transparent);
+    }
+
+    :deep(.vm-aside__icon-btn),
+    :deep(.vm-icon-btn) {
+      color: #fff;
+
+      &:hover:not(:disabled) {
+        background: color-mix(in srgb, #fff 18%, transparent);
+      }
+
+      &.is-danger:hover:not(:disabled) {
+        background: color-mix(in srgb, #fff 22%, transparent);
+      }
+    }
+  }
+}
+
+.vm-aside-list-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-aside-list-item__title {
+  display: block;
+  font-size: 13px;
+  font-weight: 650;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-aside-list-item__sub {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-style: normal;
+  color: var(--muted-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-aside-list-item__ops {
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.vm-aside-list-item__arrow {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  font-size: 16px;
+  transform: translateY(-50%);
+}
+</style>