@kine-design/crud 0.0.1-beta.14 → 0.0.1-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/crudPage/KCrudPage.tsx +13 -1
  2. package/components/crudPage/crudPage.css +6 -0
  3. package/dist/crud.css +6 -0
  4. package/dist/crud.js +34 -1
  5. package/package.json +3 -3
package/components/crudPage/KCrudPage.tsx CHANGED
@@ -67,7 +67,19 @@ export default defineComponent({
67
67
  case 'date': return formatDate(val);
68
68
  case 'datetime': return formatDateTime(val);
69
69
  case 'image': {
70
- if (!val) return '';
70
+ if (!val) {
71
+ return (
72
+ <div class="k-image" style={{ width: '40px', height: '40px' }}>
73
+ <div class="k-image-placeholder k-image-empty">
74
+ <svg viewBox="0 0 24 24" fill="none" class="k-image-placeholder-icon">
75
+ <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5" />
76
+ <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" opacity="0.5" />
77
+ <path d="M3 15l5-5 4 4 3-3 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
78
+ </svg>
79
+ </div>
80
+ </div>
81
+ );
82
+ }
71
83
  const raw = String(val);
72
84
  const resolver = props.config.imageResolver;
73
85
  const src = resolver ? resolver(raw) : raw;
package/components/crudPage/crudPage.css CHANGED
@@ -34,3 +34,9 @@
34
34
  width: 100%;
35
35
  }
36
36
 
37
+ /* ===== 空图片占位 ===== */
38
+ .k-image-empty {
39
+ color: var(--kine-color-text-muted);
40
+ opacity: 0.4;
41
+ }
42
+
package/dist/crud.css CHANGED
@@ -1308,6 +1308,12 @@ textarea.k-input {
1308
1308
  width: 100%;
1309
1309
  }
1310
1310
 
1311
+ /* ===== 空图片占位 ===== */
1312
+ .k-image-empty {
1313
+ color: var(--kine-color-text-muted);
1314
+ opacity: 0.4;
1315
+ }
1316
+
1311
1317
  /**
1312
1318
  * @description KLoginPage 登录页样式 — Phosphor 主题
1313
1319
  * @author 阿怪
package/dist/crud.js CHANGED
@@ -8711,7 +8711,40 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
8711
8711
  case "date": return formatDate(val);
8712
8712
  case "datetime": return formatDateTime(val);
8713
8713
  case "image": {
8714
- if (!val) return "";
8714
+ if (!val) return createVNode("div", {
8715
+ "class": "k-image",
8716
+ "style": {
8717
+ width: "40px",
8718
+ height: "40px"
8719
+ }
8720
+ }, [createVNode("div", { "class": "k-image-placeholder k-image-empty" }, [createVNode("svg", {
8721
+ "viewBox": "0 0 24 24",
8722
+ "fill": "none",
8723
+ "class": "k-image-placeholder-icon"
8724
+ }, [
8725
+ createVNode("rect", {
8726
+ "x": "3",
8727
+ "y": "3",
8728
+ "width": "18",
8729
+ "height": "18",
8730
+ "rx": "2",
8731
+ "stroke": "currentColor",
8732
+ "stroke-width": "1.5"
8733
+ }, null),
8734
+ createVNode("circle", {
8735
+ "cx": "8.5",
8736
+ "cy": "8.5",
8737
+ "r": "1.5",
8738
+ "fill": "currentColor",
8739
+ "opacity": "0.5"
8740
+ }, null),
8741
+ createVNode("path", {
8742
+ "d": "M3 15l5-5 4 4 3-3 6 6",
8743
+ "stroke": "currentColor",
8744
+ "stroke-width": "1.5",
8745
+ "stroke-linecap": "round"
8746
+ }, null)
8747
+ ])])]);
8715
8748
  const raw = String(val);
8716
8749
  const resolver = props.config.imageResolver;
8717
8750
  const src = resolver ? resolver(raw) : raw;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kine-design/crud",
3
- "version": "0.0.1-beta.14",
3
+ "version": "0.0.1-beta.15",
4
4
  "type": "module",
5
5
  "main": "./dist/crud.js",
6
6
  "types": "./dist/index.d.ts",
@@ -9,8 +9,8 @@
9
9
  "pinia": "^3.0.3",
10
10
  "vue": "^3.5.30",
11
11
  "vue-router": "^5.0.3",
12
- "kine-ui": "0.0.1-beta.7",
13
- "@kine-design/core": "0.0.1-beta.3"
12
+ "@kine-design/core": "0.0.1-beta.3",
13
+ "kine-ui": "0.0.1-beta.7"
14
14
  },
15
15
  "publishConfig": {
16
16
  "access": "public",