vome-core 0.3.65 → 0.3.67

package/dist/admin/crud/components/vm-tag-list.vue

@@ -1,108 +1,108 @@
-<template>
-  <span v-if="!resolved.length" class="vm-tag-list is-empty">—</span>
-  <span v-else class="vm-tag-list">
-    <span
-      v-for="(item, i) in visible"
-      :key="`${item.label}-${i}`"
-      class="vm-tag-list__tag"
-      :class="item.variant ? `is-${item.variant}` : ''"
-    >
-      {{ item.label }}
-    </span>
-    <span v-if="overflow > 0" class="vm-tag-list__more">+{{ overflow }}</span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineOptions({ name: 'vm-tag-list' })
-
-export type TagItem = {
-  label: string
-  variant?: 'brand' | 'outline' | 'muted'
-}
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | string[] | number[] | null
-    tags?: TagItem[]
-    separator?: string
-    max?: number
-  }>(),
-  {
-    separator: ',',
-    max: 0,
-  },
-)
-
-const resolved = computed((): TagItem[] => {
-  if (props.tags?.length) return props.tags
-  const v = props.modelValue
-  if (v == null || v === '') return []
-  const labels = Array.isArray(v)
-    ? v.map((x) => String(x).trim()).filter(Boolean)
-    : String(v)
-        .split(props.separator)
-        .map((s) => s.trim())
-        .filter(Boolean)
-  return labels.map((label) => ({ label, variant: 'brand' as const }))
-})
-
-const visible = computed(() => {
-  if (!props.max || props.max <= 0) return resolved.value
-  return resolved.value.slice(0, props.max)
-})
-
-const overflow = computed(() => {
-  if (!props.max || props.max <= 0) return 0
-  return Math.max(0, resolved.value.length - props.max)
-})
-</script>
-
-<style lang="scss" scoped>
-.vm-tag-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px;
-  max-width: 100%;
-
-  &.is-empty {
-    color: var(--muted-foreground);
-  }
-}
-
-.vm-tag-list__tag {
-  display: inline-flex;
-  max-width: 100%;
-  height: 20px;
-  align-items: center;
-  overflow: hidden;
-  padding: 0 6px;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--brand) 14%, transparent);
-  color: var(--brand);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.35;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.is-outline {
-    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
-    background: transparent;
-  }
-
-  &.is-muted {
-    background: color-mix(in srgb, var(--foreground) 6%, transparent);
-    color: var(--muted-foreground);
-  }
-}
-
-.vm-tag-list__more {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--muted-foreground);
-}
-</style>
+<template>
+  <span v-if="!resolved.length" class="vm-tag-list is-empty">—</span>
+  <span v-else class="vm-tag-list">
+    <span
+      v-for="(item, i) in visible"
+      :key="`${item.label}-${i}`"
+      class="vm-tag-list__tag"
+      :class="item.variant ? `is-${item.variant}` : ''"
+    >
+      {{ item.label }}
+    </span>
+    <span v-if="overflow > 0" class="vm-tag-list__more">+{{ overflow }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-tag-list' })
+
+export type TagItem = {
+  label: string
+  variant?: 'brand' | 'outline' | 'muted'
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | string[] | number[] | null
+    tags?: TagItem[]
+    separator?: string
+    max?: number
+  }>(),
+  {
+    separator: ',',
+    max: 0,
+  },
+)
+
+const resolved = computed((): TagItem[] => {
+  if (props.tags?.length) return props.tags
+  const v = props.modelValue
+  if (v == null || v === '') return []
+  const labels = Array.isArray(v)
+    ? v.map((x) => String(x).trim()).filter(Boolean)
+    : String(v)
+        .split(props.separator)
+        .map((s) => s.trim())
+        .filter(Boolean)
+  return labels.map((label) => ({ label, variant: 'brand' as const }))
+})
+
+const visible = computed(() => {
+  if (!props.max || props.max <= 0) return resolved.value
+  return resolved.value.slice(0, props.max)
+})
+
+const overflow = computed(() => {
+  if (!props.max || props.max <= 0) return 0
+  return Math.max(0, resolved.value.length - props.max)
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-tag-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+
+  &.is-empty {
+    color: var(--muted-foreground);
+  }
+}
+
+.vm-tag-list__tag {
+  display: inline-flex;
+  max-width: 100%;
+  height: 20px;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 6px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--brand) 14%, transparent);
+  color: var(--brand);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.is-outline {
+    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
+    background: transparent;
+  }
+
+  &.is-muted {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    color: var(--muted-foreground);
+  }
+}
+
+.vm-tag-list__more {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+</style>

package/dist/admin/crud/components/vm-text-link.vue

@@ -1,52 +1,52 @@
-<template>
-  <button
-    type="button"
-    class="vm-text-link"
-    :disabled="disabled"
-    @click="emit('click', $event)"
-  >
-    <slot>{{ label ?? crudLabel('view') }}</slot>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { crudLabel } from '../style'
-defineOptions({ name: 'vm-text-link' })
-
-withDefaults(
-  defineProps<{
-    label?: string
-    disabled?: boolean
-  }>(),
-  {
-    label: undefined,
-    disabled: false,
-  },
-)
-
-const emit = defineEmits<{
-  click: [e: MouseEvent]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.vm-text-link {
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--brand);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    color: var(--brand-deep);
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vm-text-link"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <slot>{{ label ?? crudLabel('view') }}</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { crudLabel } from '../style'
+defineOptions({ name: 'vm-text-link' })
+
+withDefaults(
+  defineProps<{
+    label?: string
+    disabled?: boolean
+  }>(),
+  {
+    label: undefined,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-text-link {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    color: var(--brand-deep);
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}
+</style>

package/dist/admin/crud/components/vm-toggle-switch.vue

@@ -1,84 +1,84 @@
-<template>
-  <button
-    type="button"
-    class="vm-toggle-switch"
-    :class="{ 'is-on': on, 'is-loading': loading }"
-    role="switch"
-    :aria-checked="on"
-    :disabled="disabled || loading"
-    @click="emit('update:modelValue', !on)"
-  >
-    <span class="vm-toggle-switch__knob" />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineOptions({ name: 'vm-toggle-switch' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean | number | null
-    activeValue?: number | boolean
-    loading?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    activeValue: 1,
-    loading: false,
-    disabled: false,
-  },
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [v: boolean]
-}>()
-
-const on = computed(() => {
-  const v = props.modelValue
-  if (typeof props.activeValue === 'boolean') return Boolean(v)
-  return Number(v) === Number(props.activeValue)
-})
-</script>
-
-<style lang="scss" scoped>
-.vm-toggle-switch {
-  position: relative;
-  width: 42px;
-  height: 24px;
-  flex-shrink: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--foreground) 18%, transparent);
-  cursor: pointer;
-  transition: background 0.15s ease;
-
-  &.is-on {
-    background: var(--brand);
-  }
-
-  &.is-loading,
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.vm-toggle-switch__knob {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-  transition: transform 0.15s ease;
-
-  .is-on > & {
-    transform: translateX(18px);
-  }
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vm-toggle-switch"
+    :class="{ 'is-on': on, 'is-loading': loading }"
+    role="switch"
+    :aria-checked="on"
+    :disabled="disabled || loading"
+    @click="emit('update:modelValue', !on)"
+  >
+    <span class="vm-toggle-switch__knob" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-toggle-switch' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean | number | null
+    activeValue?: number | boolean
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    activeValue: 1,
+    loading: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: boolean]
+}>()
+
+const on = computed(() => {
+  const v = props.modelValue
+  if (typeof props.activeValue === 'boolean') return Boolean(v)
+  return Number(v) === Number(props.activeValue)
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-toggle-switch {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--foreground) 18%, transparent);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &.is-on {
+    background: var(--brand);
+  }
+
+  &.is-loading,
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-toggle-switch__knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+  transition: transform 0.15s ease;
+
+  .is-on > & {
+    transform: translateX(18px);
+  }
+}
+</style>