@ysgroup/ui 0.1.19 → 0.1.21

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@ysgroup/theme": "^0.1.0",
-    "@ysgroup/contracts": "^0.1.4"
+    "@ysgroup/contracts": "workspace:^",
+    "@ysgroup/theme": "^0.1.0"
   },
   "peerDependencies": {
     "element-plus": ">=2.9",
@@ -21,4 +21,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/YsCrudTable.vue

@@ -160,7 +160,7 @@ function onSubmit(payload: Record<string, unknown>) {
       >
     </YsTableToolbar>
 
-    <el-table :data="paged" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
+    <el-table :fit="false" :data="paged" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
       <el-table-column v-for="c in displayColumns" :key="c.key" :label="c.title" :width="columnWidth(c)" show-overflow-tooltip>
         <template #default="{ row }">{{ display(row, c) }}</template>
       </el-table-column>

package/src/components/YsRoleTag.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { enumLabel } from "../tokens-runtime";
+
+const props = withDefaults(
+  defineProps<{
+    role?: string;
+    label?: string;
+    size?: "small" | "default" | "large";
+  }>(),
+  {
+    role: "Initiate",
+    label: "",
+    size: "default",
+  },
+);
+
+const roleCode = computed(() => props.role.trim() || "Initiate");
+const roleClass = computed(() => {
+  const builtin = ["Root", "Admin", "Manager", "Editor", "Viewer", "Initiate"];
+  return builtin.includes(roleCode.value) ? roleCode.value.toLowerCase() : "custom";
+});
+const displayLabel = computed(
+  () => props.label || enumLabel("UserRole" as never, roleCode.value) || roleCode.value,
+);
+</script>
+
+<template>
+  <el-tag :size="size" class="ys-role-tag" :class="`ys-role-tag--${roleClass}`" effect="plain">
+    {{ displayLabel }}
+  </el-tag>
+</template>
+
+<style scoped>
+.ys-role-tag {
+  --ys-role-bg: #f8fafc;
+  --ys-role-text: #475569;
+  --ys-role-border: #cbd5e1;
+
+  border-color: var(--ys-role-border);
+  background-color: var(--ys-role-bg);
+  color: var(--ys-role-text);
+  font-weight: 600;
+}
+
+.ys-role-tag--root {
+  --ys-role-bg: #ede9fe;
+  --ys-role-text: #4c1d95;
+  --ys-role-border: #8b5cf6;
+}
+
+.ys-role-tag--admin {
+  --ys-role-bg: #fee2e2;
+  --ys-role-text: #991b1b;
+  --ys-role-border: #f87171;
+}
+
+.ys-role-tag--manager {
+  --ys-role-bg: #ffedd5;
+  --ys-role-text: #9a3412;
+  --ys-role-border: #fb923c;
+}
+
+.ys-role-tag--editor {
+  --ys-role-bg: #dbeafe;
+  --ys-role-text: #1d4ed8;
+  --ys-role-border: #60a5fa;
+}
+
+.ys-role-tag--viewer {
+  --ys-role-bg: #eff6ff;
+  --ys-role-text: #2563eb;
+  --ys-role-border: #93c5fd;
+}
+
+.ys-role-tag--initiate {
+  --ys-role-bg: #f1f5f9;
+  --ys-role-text: #64748b;
+  --ys-role-border: #cbd5e1;
+}
+</style>

package/src/components/YsRowActionMenu.vue

@@ -24,10 +24,12 @@ function select(action: YsRowAction) {
 <template>
   <el-popover
     :visible="visible"
-    placement="right"
-    :fallback-placements="['right']"
+    placement="left-start"
+    :fallback-placements="['left', 'left-end', 'top-end', 'bottom-end']"
     :width="150"
-    :offset="12"
+    :offset="8"
+    :hide-after="0"
+    :teleported="true"
     trigger="click"
     popper-class="ys-action-popover"
     @update:visible="visible = $event"

package/src/index.ts

@@ -11,4 +11,5 @@ export { default as YsPageHeader } from "./components/YsPageHeader.vue";
 export { default as YsLoginPage } from "./components/YsLoginPage.vue";
 export { default as YsSettingsCenterDialog } from "./components/YsSettingsCenterDialog.vue";
 export { default as YsPortalGrid } from "./components/YsPortalGrid.vue";
+export { default as YsRoleTag } from "./components/YsRoleTag.vue";
 export { enumOptions, enumLabel, type EnumOption } from "./tokens-runtime";

package/src/tokens-runtime.ts

@@ -14,7 +14,7 @@ export function enumOptions(enumName: keyof typeof ENUM_META): EnumOption[] {
   return Object.entries(meta)
     .map(([value, m]) => ({ value, label: m.label ?? m.name ?? value, sort: m.sort ?? 0 }))
     .sort((a, b) =>
-      enumName === "AuthUserRole" || enumName === "AppUserRole"
+      enumName === "UserRole"
         ? b.sort - a.sort
         : a.sort - b.sort,
     );