@kernel4632/kima 0.6.0 → 0.6.1
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.
- package/README.md +136 -93
- package/dist/kima-elements-core.js +5 -5
- package/dist/kima-elements.js +11 -11
- package/dist/style.css +1 -1
- package/dist/vue/components/core/icon.ce.js +1 -1
- package/dist/vue/components/shell/app-shell.ce.js +1 -1
- package/dist/vue/components/shell/config-provider.ce.js +1 -1
- package/dist/vue/components/shell/sidebar.ce.js +1 -1
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -2,166 +2,209 @@
|
|
|
2
2
|
|
|
3
3
|
**K**inetic · **I**nteraction · **M**otion · **A**live。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
KIMA 是面向 Web 应用的 UI 设计系统与组件库，提供 **Vue 组件**与可在原生网页中使用的 **Web Components**。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
以 Material You 为设计参考，KIMA 采用大控件、宽松布局和圆角表面，用动效引导注意力，让交互反馈清晰、自然。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## 特性
|
|
10
|
+
|
|
11
|
+
- **两种接入方式**：Vue 中按需导入，或使用自定义元素接入其他 Web 项目。
|
|
12
|
+
- **动态主题**：由单一种子色生成品牌配色，支持深浅主题；成功、警告和危险色保留语义。
|
|
13
|
+
- **交互反馈**：状态层、焦点提示、涟漪与过渡动效，兼顾鼠标、触屏和键盘操作。
|
|
14
|
+
- **从基础到内容**：包含输入、导航、弹层、数据展示，以及代码和富文本编辑等组件。
|
|
15
|
+
- **统一视觉**：通过 CSS 变量控制颜色、字体、形状和间距，适配应用自身的主题。
|
|
10
16
|
|
|
11
17
|
## 安装
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
使用 npm、pnpm 或其他兼容 npm 的包管理器：
|
|
14
20
|
|
|
15
21
|
```sh
|
|
16
|
-
|
|
22
|
+
npm install @kernel4632/kima vue
|
|
17
23
|
```
|
|
18
24
|
|
|
19
|
-
发布前、本地验证：
|
|
20
|
-
|
|
21
25
|
```sh
|
|
22
|
-
pnpm
|
|
23
|
-
pnpm build:lib
|
|
24
|
-
pnpm verify:lib
|
|
25
|
-
pnpm verify:install
|
|
26
|
-
# 将 artifacts/kernel4632-kima-0.6.0.tgz 拷到其他项目
|
|
27
|
-
pnpm add ./kernel4632-kima-0.6.0.tgz vue
|
|
26
|
+
pnpm add @kernel4632/kima vue
|
|
28
27
|
```
|
|
29
28
|
|
|
30
|
-
|
|
29
|
+
Vue 组件需要宿主提供兼容的 Vue 3 运行时，版本要求见 [peerDependencies](https://github.com/kernel4632/kima/blob/main/package.json#L91)。自定义元素入口已内置运行时，页面代码无需调用 Vue API。
|
|
31
30
|
|
|
32
|
-
## Vue
|
|
31
|
+
## 在 Vue 中使用
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
按需导入组件，并在应用入口引入一次组件样式：
|
|
35
34
|
|
|
36
35
|
```vue
|
|
37
36
|
<script setup>
|
|
37
|
+
import { ref } from 'vue';
|
|
38
38
|
import { KimaButton, KimaTextField } from '@kernel4632/kima';
|
|
39
39
|
import '@kernel4632/kima/style.css';
|
|
40
|
-
|
|
40
|
+
|
|
41
41
|
const name = ref('');
|
|
42
|
+
const savedName = ref('');
|
|
42
43
|
</script>
|
|
43
44
|
|
|
44
45
|
<template>
|
|
45
|
-
<
|
|
46
|
-
|
|
46
|
+
<form @submit.prevent="savedName = name">
|
|
47
|
+
<p>名称</p>
|
|
48
|
+
<KimaTextField
|
|
49
|
+
v-model="name"
|
|
50
|
+
label="名称"
|
|
51
|
+
placeholder="输入名称"
|
|
52
|
+
/>
|
|
53
|
+
<KimaButton type="submit">保存</KimaButton>
|
|
54
|
+
<p v-if="savedName">已保存：{{ savedName }}</p>
|
|
55
|
+
</form>
|
|
47
56
|
</template>
|
|
48
57
|
```
|
|
49
58
|
|
|
50
|
-
|
|
59
|
+
文本框的可访问名不会渲染为可见标签，标签文字由应用自行排版。具名导入支持构建工具移除未使用的组件与内容引擎；组件样式是统一样式文件。
|
|
51
60
|
|
|
52
|
-
|
|
61
|
+
## 在原生网页中使用
|
|
62
|
+
|
|
63
|
+
### 使用构建工具
|
|
64
|
+
|
|
65
|
+
在页面的 JavaScript 入口注册核心组件：
|
|
53
66
|
|
|
54
67
|
```js
|
|
55
68
|
import '@kernel4632/kima/elements/core';
|
|
56
|
-
// 需要全部 136 个组件及内容引擎时改用 @kernel4632/kima/elements
|
|
57
69
|
```
|
|
58
70
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
无构建工具：把 tarball 内的 [`dist/kima-elements-core.js`](https://github.com/kernel4632/kima#导出入口) 以及同目录第三方许可证声明一起部署，通过 HTTP 服务访问，不要直接双击本地网页：
|
|
71
|
+
然后在 HTML 中使用：
|
|
62
72
|
|
|
63
73
|
```html
|
|
64
|
-
<script type="module" src="./kima-elements-core.js"></script>
|
|
65
74
|
<kima-button variant="filled">保存</kima-button>
|
|
75
|
+
<kima-text-field label="名称" placeholder="输入名称"></kima-text-field>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
需要编辑器等扩展组件时，改用全量入口：
|
|
79
|
+
|
|
80
|
+
```js
|
|
81
|
+
import '@kernel4632/kima/elements';
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
两种注册入口均自带运行时、设计 token 和组件样式，无需额外导入样式文件。通常选择一个入口即可；全量入口包含全部组件与内容引擎，不会根据页面使用的标签自动裁剪。
|
|
85
|
+
|
|
86
|
+
### 不使用构建工具
|
|
87
|
+
|
|
88
|
+
将安装包内的核心独立文件 [`dist/kima-elements-core.js`](https://www.npmjs.com/package/@kernel4632/kima?activeTab=code) 复制到网站，并通过 HTTP 服务加载：
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!doctype html>
|
|
92
|
+
<html lang="zh-CN">
|
|
93
|
+
<head>
|
|
94
|
+
<meta charset="UTF-8">
|
|
95
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
96
|
+
<title>KIMA 示例</title>
|
|
97
|
+
<script type="module" src="./kima-elements-core.js"></script>
|
|
98
|
+
</head>
|
|
99
|
+
<body>
|
|
100
|
+
<kima-button variant="filled">保存</kima-button>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
需要全量组件时换用 [`dist/kima-elements.js`](https://www.npmjs.com/package/@kernel4632/kima?activeTab=code)。复制部署时应一并保留包内的第三方许可证声明。
|
|
106
|
+
|
|
107
|
+
### 属性与事件
|
|
108
|
+
|
|
109
|
+
字符串和布尔值可通过 HTML 属性传入；布尔属性存在即表示启用，关闭时移除属性或通过 JavaScript 赋值。数组与对象使用 JavaScript 属性赋值，并在元素完成注册后设置。
|
|
110
|
+
|
|
111
|
+
自定义组件事件的参数放在事件的参数数组中；按钮点击仍使用普通 DOM 点击事件。例如，读取文本框的值：
|
|
112
|
+
|
|
113
|
+
```html
|
|
66
114
|
<kima-text-field id="name" label="名称"></kima-text-field>
|
|
115
|
+
<output id="value"></output>
|
|
116
|
+
|
|
67
117
|
<script type="module">
|
|
68
|
-
|
|
118
|
+
import '@kernel4632/kima/elements/core';
|
|
119
|
+
|
|
120
|
+
const field = document.getElementById('name');
|
|
121
|
+
const output = document.getElementById('value');
|
|
122
|
+
|
|
123
|
+
field.addEventListener('update:modelValue', (event) => {
|
|
69
124
|
const [value] = event.detail;
|
|
70
|
-
|
|
125
|
+
output.textContent = value;
|
|
71
126
|
});
|
|
72
127
|
</script>
|
|
73
128
|
```
|
|
74
129
|
|
|
75
|
-
|
|
130
|
+
## 主题与样式
|
|
76
131
|
|
|
77
|
-
|
|
132
|
+
默认使用深色主题。在页面根元素设置主题属性可切换默认深浅配色：
|
|
78
133
|
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
applyPalette('#61afef', { isDark: true });
|
|
134
|
+
```html
|
|
135
|
+
<html lang="zh-CN" data-kima-theme="light">
|
|
82
136
|
```
|
|
83
137
|
|
|
84
|
-
|
|
138
|
+
也可以在浏览器中用种子色生成并应用配色：
|
|
85
139
|
|
|
86
|
-
|
|
140
|
+
```js
|
|
141
|
+
import { applyPalette, resetPalette } from '@kernel4632/kima/theme';
|
|
87
142
|
|
|
88
|
-
|
|
89
|
-
| --- | --- |
|
|
90
|
-
| `@kernel4632/kima` | 具名 Vue 组件导出、componentNames、代码块语言登记工具 |
|
|
91
|
-
| `@kernel4632/kima/style.css` | Vue 消费者所需样式和 token |
|
|
92
|
-
| `@kernel4632/kima/elements` | 独立自定义元素注册与内置样式（全量 136 个） |
|
|
93
|
-
| `@kernel4632/kima/elements/core` | 只注册 core 档（默认推荐）；轻量核心入口（体积以构建输出为准） |
|
|
94
|
-
| `@kernel4632/kima/theme` | 动态配色生成与应用工具 |
|
|
143
|
+
applyPalette('#61afef', { isDark: false });
|
|
95
144
|
|
|
96
|
-
|
|
145
|
+
// 清除运行时配色，恢复默认主题。
|
|
146
|
+
resetPalette();
|
|
147
|
+
```
|
|
97
148
|
|
|
98
|
-
|
|
149
|
+
运行时配色会写入内联变量。自定义种子色后切换深浅模式时，重新应用对应模式；若要回到默认主题属性控制的配色，先清除运行时配色。
|
|
99
150
|
|
|
100
|
-
|
|
151
|
+
KIMA 样式使用自身命名空间，不附带页面 reset 或背景。应用可自行组合页面样式，例如：
|
|
101
152
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
153
|
+
```css
|
|
154
|
+
body {
|
|
155
|
+
background: var(--kima-color-surface);
|
|
156
|
+
color: var(--kima-color-on-surface);
|
|
157
|
+
font-family: var(--kima-font-family);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
107
160
|
|
|
108
|
-
|
|
161
|
+
默认字体栈优先使用 Maple Mono NF CN，再回退到系统等宽字体。字体文件不包含在组件包中，可由应用自行加载。
|
|
109
162
|
|
|
110
|
-
|
|
163
|
+
自定义元素采用 light DOM，**不提供 Shadow DOM 样式隔离**，宿主页面的全局样式可能影响组件。
|
|
111
164
|
|
|
112
|
-
|
|
113
|
-
import dart from 'highlight.js/lib/languages/dart';
|
|
114
|
-
import { registerCodeLanguage } from '@kernel4632/kima';
|
|
115
|
-
registerCodeLanguage('dart', dart);
|
|
116
|
-
```
|
|
165
|
+
## 入口选择
|
|
117
166
|
|
|
118
|
-
|
|
167
|
+
| 入口 | 用途 |
|
|
168
|
+
| --- | --- |
|
|
169
|
+
| 主入口 | Vue 组件的具名导出，以及代码块语言登记工具 |
|
|
170
|
+
| [Vue 样式](https://www.npmjs.com/package/@kernel4632/kima?activeTab=code) | Vue 组件使用的样式与设计 token |
|
|
171
|
+
| [核心元素入口](https://github.com/kernel4632/kima/blob/main/src/elements-core.js) | 常用基础组件，自带运行时和样式 |
|
|
172
|
+
| [全量元素入口](https://github.com/kernel4632/kima/blob/main/src/elements.js) | 全部自定义元素，包含内容引擎 |
|
|
173
|
+
| [主题入口](https://github.com/kernel4632/kima/blob/main/src/utils/theme.js) | 配色生成、应用与重置 |
|
|
119
174
|
|
|
120
|
-
|
|
175
|
+
对应导入路径：
|
|
121
176
|
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
pnpm build
|
|
129
|
-
pnpm build:lib
|
|
130
|
-
pnpm verify:lib
|
|
131
|
-
pnpm verify:install
|
|
132
|
-
pnpm test # 约 8 秒冒烟：入口、真实点击、弹层、表单值
|
|
133
|
-
pnpm test:ssr # 发布前执行
|
|
134
|
-
pnpm shots
|
|
135
|
-
# 逐页视觉审查：桌面与手机各跑一遍，截图落在 shots/audit*
|
|
136
|
-
node scripts/audit-visual.mjs http://127.0.0.1:5188
|
|
137
|
-
node scripts/audit-montage.mjs
|
|
138
|
-
# 只审 core 档（43 页）：$env:KIMA_AUDIT_TIER = 'core'
|
|
177
|
+
```js
|
|
178
|
+
import { KimaButton } from '@kernel4632/kima';
|
|
179
|
+
import '@kernel4632/kima/style.css';
|
|
180
|
+
import '@kernel4632/kima/elements/core';
|
|
181
|
+
import '@kernel4632/kima/elements';
|
|
182
|
+
import { applyPalette } from '@kernel4632/kima/theme';
|
|
139
183
|
```
|
|
140
184
|
|
|
141
|
-
|
|
185
|
+
以上是各入口的路径对照，不需要同时导入。Vue 项目通常选择具名组件与样式；原生网页通常选择核心或全量元素入口。
|
|
142
186
|
|
|
143
|
-
|
|
187
|
+
## 文档
|
|
144
188
|
|
|
145
|
-
|
|
189
|
+
- [组件索引](https://github.com/kernel4632/kima/blob/main/docs/component-index.md)：查找组件与源码。
|
|
190
|
+
- [能力与边界](https://github.com/kernel4632/kima/blob/main/docs/component-comparison.md)：了解组件支持的功能。
|
|
191
|
+
- [问题反馈](https://github.com/kernel4632/kima/issues)：提交缺陷或功能建议。
|
|
146
192
|
|
|
147
|
-
|
|
193
|
+
KIMA 提供 ESM 格式的 JavaScript，不提供 CommonJS 或 TypeScript 类型声明。面向支持自定义元素、原生对话框、ResizeObserver、Web Animations 和现代 CSS 的浏览器。
|
|
148
194
|
|
|
149
|
-
|
|
195
|
+
## 本地开发
|
|
150
196
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
KIMA 自身使用 MIT 许可证。独立浏览器包内含第三方代码，完整许可证随包放在 [`dist/THIRD_PARTY_NOTICES.txt`](https://github.com/kernel4632/kima#许可证)；复制或再分发独立包时须保留相应声明。构建根据实际模块图收集文本，依赖缺少授权文本时会阻断构建。
|
|
197
|
+
克隆仓库后，在项目根目录运行：
|
|
154
198
|
|
|
155
|
-
|
|
199
|
+
```sh
|
|
200
|
+
pnpm install
|
|
201
|
+
pnpm dev
|
|
202
|
+
```
|
|
156
203
|
|
|
157
|
-
|
|
204
|
+
本地文档站提供组件预览、用法示例和属性参考。
|
|
158
205
|
|
|
159
|
-
|
|
160
|
-
2. 执行 `npm whoami --registry=https://registry.npmjs.org` 确认身份，不要把 token 写入源码或提交。
|
|
161
|
-
3. 执行 `pnpm release:check`、浏览器测试和 SSR 测试。
|
|
162
|
-
4. 检查目标版本未被使用、发布清单和许可证；版本号不会随提交自动增长，文档站只显示构建时的版本。确定版本后执行 `npm publish --access public --registry=https://registry.npmjs.org`（可能要求 2FA）。不要重复发布已有版本。
|
|
163
|
-
5. 执行 `npm view @kernel4632/kima version --registry=https://registry.npmjs.org` 并在新项目从 registry 安装复验，然后更新发布状态。
|
|
206
|
+
## 许可证
|
|
164
207
|
|
|
165
|
-
|
|
208
|
+
KIMA 使用 [MIT 许可证](https://github.com/kernel4632/kima/blob/main/LICENSE)。
|
|
166
209
|
|
|
167
|
-
|
|
210
|
+
独立浏览器包包含第三方代码，其授权文本随包提供于 [`dist/THIRD_PARTY_NOTICES.txt`](https://www.npmjs.com/package/@kernel4632/kima?activeTab=code)。复制或再分发时须保留相应许可证与版权声明。
|
|
@@ -5298,7 +5298,7 @@ function Xu(e, t, n, r, i, a) {
|
|
|
5298
5298
|
ref_for: !0
|
|
5299
5299
|
}, e.transformAttrs(t[1], e.calculatedStrokeWidth)), null, 16))), 128))], 16, Yu);
|
|
5300
5300
|
}
|
|
5301
|
-
var Zu = /* @__PURE__ */ Ju(qu, [["render", Xu], ["__file", "/Users/mahmudulhasan/Desktop/Projects/Hugeicons/hugeicons-monorepo/packages/vue/src/components/HugeiconsIcon.vue"]]), Qu = ".kima-icon[data-v-
|
|
5301
|
+
var Zu = /* @__PURE__ */ Ju(qu, [["render", Xu], ["__file", "/Users/mahmudulhasan/Desktop/Projects/Hugeicons/hugeicons-monorepo/packages/vue/src/components/HugeiconsIcon.vue"]]), Qu = ".kima-icon[data-v-5c94f2ca]{vertical-align:middle;flex:none;display:inline-block}", $u = (e, t) => {
|
|
5302
5302
|
let n = e.__vccOpts || e;
|
|
5303
5303
|
for (let [e, r] of t) n[e] = r;
|
|
5304
5304
|
return n;
|
|
@@ -5338,7 +5338,7 @@ var Zu = /* @__PURE__ */ Ju(qu, [["render", Xu], ["__file", "/Users/mahmudulhasa
|
|
|
5338
5338
|
"stroke-width"
|
|
5339
5339
|
]));
|
|
5340
5340
|
}
|
|
5341
|
-
}, [["styles", [Qu]], ["__scopeId", "data-v-
|
|
5341
|
+
}, [["styles", [Qu]], ["__scopeId", "data-v-5c94f2ca"]]);
|
|
5342
5342
|
// src/utils/native-slots.js
|
|
5343
5343
|
function td(e) {
|
|
5344
5344
|
let t = !!js()?.ce, n = t ? Sl() : null, r = /* @__PURE__ */ P(/* @__PURE__ */ new Set()), i;
|
|
@@ -7955,8 +7955,8 @@ function Op() {
|
|
|
7955
7955
|
} }
|
|
7956
7956
|
};
|
|
7957
7957
|
}
|
|
7958
|
-
// src/components/shell/config-provider.ce.vue?vue&type=style&index=0&inline&scoped=
|
|
7959
|
-
var kp = ".kima-config-provider[data-v-
|
|
7958
|
+
// src/components/shell/config-provider.ce.vue?vue&type=style&index=0&inline&scoped=d9085095&lang.scss
|
|
7959
|
+
var kp = ".kima-config-provider[data-v-d9085095]{color:var(--kima-color-on-surface);font-family:var(--kima-font-family);--kima-color-layer-1:color-mix(in srgb, var(--kima-color-on-surface) 5%, transparent);--kima-color-layer-2:color-mix(in srgb, var(--kima-color-on-surface) 10%, transparent);--kima-color-layer-3:color-mix(in srgb, var(--kima-color-on-surface) 15%, transparent);--kima-color-popup:var(--kima-color-surface-container-high);--kima-color-popup-large:var(--kima-color-surface-container-highest);--kima-color-primary-container-hover:color-mix(in srgb, var(--kima-color-primary-container) 90%, var(--kima-color-on-primary-container))}.kima-config-provider[data-kima-reduced-motion=reduce][data-v-d9085095]{--kima-duration-fast:0s;--kima-duration-medium:0s;--kima-duration-slow:0s;--kima-duration-slower:0s;--kima-duration-effects:0s}.kima-config-provider[data-kima-reduced-motion=reduce][data-v-d9085095] *{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}", Ap = [
|
|
7960
7960
|
"data-kima-seed",
|
|
7961
7961
|
"data-kima-variant",
|
|
7962
7962
|
"data-kima-theme",
|
|
@@ -8056,7 +8056,7 @@ var kp = ".kima-config-provider[data-v-28f72ed9]{color:var(--kima-color-on-surfa
|
|
|
8056
8056
|
}]
|
|
8057
8057
|
}), [F(n) ? hr((H(), U("div", jp, null, 512)), [[F(r)]]) : V(e.$slots, "default", { config: l.value }, void 0, !0, 1)], 16, Ap));
|
|
8058
8058
|
}
|
|
8059
|
-
}), [["styles", [kp]], ["__scopeId", "data-v-
|
|
8059
|
+
}), [["styles", [kp]], ["__scopeId", "data-v-d9085095"]]), Np = "@keyframes kima-ripple-glow-f55122f3{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-date-picker[data-v-f55122f3]{gap:var(--kima-space-1);width:100%;min-width:0;max-width:320px;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);flex-direction:column;display:inline-flex;position:relative}.kima-date-picker__control[data-v-f55122f3]{align-items:center;gap:var(--kima-space-1);height:var(--kima-field-height);box-sizing:border-box;padding-right:var(--kima-space-2);border-radius:var(--kima-radius-m);background:var(--kima-color-layer-2);transition:background-color var(--kima-duration-effects) var(--kima-curve-standard), box-shadow var(--kima-duration-effects) var(--kima-curve-standard), opacity var(--kima-duration-effects) var(--kima-curve-standard);display:flex;position:relative}.kima-date-picker__control[data-v-f55122f3]:after{content:\"\";z-index:1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--kima-duration-effects) var(--kima-curve-standard);background:currentColor;position:absolute;inset:0}.kima-date-picker__control[data-v-f55122f3]>*{z-index:2;position:relative}.kima-date-picker__control[data-v-f55122f3]:hover:not(:disabled):not([aria-disabled=true]):after{opacity:var(--kima-state-hover)}.kima-date-picker__control[data-v-f55122f3]:focus-visible:after{opacity:var(--kima-state-focus)}.kima-date-picker__control[data-v-f55122f3]:active:not(:disabled):not([aria-disabled=true]):after{opacity:var(--kima-state-pressed)}.kima-date-picker__control[data-v-f55122f3]{position:relative;overflow:hidden}.kima-date-picker__control[data-v-f55122f3] .kima-ripple{z-index:2;pointer-events:none;animation:kima-ripple-glow-f55122f3 var(--kima-duration-slower) linear forwards;background:currentColor;position:absolute;inset:0}.kima-date-picker__control[data-v-f55122f3]:hover:not([aria-disabled=true]),.kima-date-picker--open .kima-date-picker__control[data-v-f55122f3]{background:var(--kima-color-layer-3)}.kima-date-picker__control[data-v-f55122f3]:focus-within{box-shadow:inset 0 0 0 var(--kima-outline-width-focused) var(--kima-color-primary)}.kima-date-picker--open .kima-date-picker__control[data-v-f55122f3]:focus-within{box-shadow:none}.kima-date-picker--disabled .kima-date-picker__control[data-v-f55122f3]{cursor:not-allowed;opacity:var(--kima-opacity-disabled)}.kima-date-picker__trigger[data-v-f55122f3]{box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--kima-space-3);min-width:0;height:100%;padding:0 0 0 var(--kima-field-padding);color:var(--kima-color-on-surface);background:var(--kima-color-transparent);font:inherit;font-size:var(--kima-font-size-body-large);text-align:left;cursor:pointer;border:0;flex:auto;display:flex}.kima-date-picker__trigger[data-v-f55122f3]:disabled{cursor:not-allowed}.kima-date-picker__trigger-label[data-v-f55122f3]{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.kima-date-picker__trigger-label--placeholder[data-v-f55122f3]{color:var(--kima-color-on-surface-variant)}.kima-date-picker__icon[data-v-f55122f3]{margin-right:var(--kima-space-2);color:var(--kima-color-on-surface-variant);flex:none}.kima-date-picker__clear[data-v-f55122f3]{border-radius:var(--kima-radius-full);width:28px;height:28px;color:var(--kima-color-on-surface-variant);background:var(--kima-color-transparent);cursor:pointer;transition:color var(--kima-duration-effects) var(--kima-curve-standard), background-color var(--kima-duration-effects) var(--kima-curve-standard), border-color var(--kima-duration-effects) var(--kima-curve-standard), box-shadow var(--kima-duration-effects) var(--kima-curve-standard), opacity var(--kima-duration-effects) var(--kima-curve-standard);border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.kima-date-picker__clear[data-v-f55122f3]:hover:not(:disabled),.kima-date-picker__clear[data-v-f55122f3]:focus-visible{color:var(--kima-color-primary);background:var(--kima-color-layer-3)}.kima-date-picker__clear[data-v-f55122f3]:focus-visible{outline:2px solid var(--kima-color-primary);outline-offset:1px}.kima-date-picker__clear[data-v-f55122f3]:disabled{cursor:not-allowed}.kima-date-picker__native[data-v-f55122f3]{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.kima-date-picker__popup[data-v-f55122f3]{box-sizing:border-box;z-index:20;top:calc(100% + var(--kima-space-2));width:max(100%,268px);padding:var(--kima-space-2);border-radius:var(--kima-radius-md);background:var(--kima-color-popup);box-shadow:var(--kima-elevation-3);border:0;position:absolute;left:0}.kima-date-picker__head[data-v-f55122f3]{justify-content:space-between;align-items:center;gap:var(--kima-space-2);padding:0 var(--kima-space-1) var(--kima-space-2);display:flex}.kima-date-picker__month[data-v-f55122f3]{font-size:var(--kima-font-size-md);font-weight:var(--kima-font-weight-medium);text-align:center}.kima-date-picker__nav[data-v-f55122f3]{border-radius:var(--kima-radius-full);width:32px;height:32px;color:var(--kima-color-on-surface-variant);background:var(--kima-color-transparent);cursor:pointer;transition:color var(--kima-duration-effects) var(--kima-curve-standard), background-color var(--kima-duration-effects) var(--kima-curve-standard), border-color var(--kima-duration-effects) var(--kima-curve-standard), box-shadow var(--kima-duration-effects) var(--kima-curve-standard), opacity var(--kima-duration-effects) var(--kima-curve-standard);border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kima-date-picker__nav[data-v-f55122f3]:hover:not(:disabled){color:var(--kima-color-primary);background:var(--kima-color-layer-3)}.kima-date-picker__nav[data-v-f55122f3]:focus-visible{outline:2px solid var(--kima-color-primary);outline-offset:1px}.kima-date-picker__nav[data-v-f55122f3]:disabled{cursor:not-allowed;opacity:var(--kima-opacity-disabled)}.kima-date-picker__grid.kima-fade-leave-active[data-v-f55122f3]{inset-inline:var(--kima-space-2);pointer-events:none;position:absolute}.kima-date-picker__grid[data-v-f55122f3]{gap:2px;display:grid}.kima-date-picker__row[data-v-f55122f3]{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.kima-date-picker__weekday[data-v-f55122f3]{padding:var(--kima-space-1) 0;color:var(--kima-color-on-surface-variant);font-size:var(--kima-font-size-xs);font-weight:var(--kima-font-weight-medium);text-align:center}.kima-date-picker__cell[data-v-f55122f3]{justify-content:center;align-items:center;display:flex}.kima-date-picker__day[data-v-f55122f3]{aspect-ratio:1;border-radius:var(--kima-radius-full);width:100%;min-height:36px;color:var(--kima-color-on-surface);background:var(--kima-color-transparent);font:inherit;font-size:var(--kima-font-size-md);cursor:pointer;transition:color var(--kima-duration-effects) var(--kima-curve-standard), background-color var(--kima-duration-effects) var(--kima-curve-standard), border-color var(--kima-duration-effects) var(--kima-curve-standard), box-shadow var(--kima-duration-effects) var(--kima-curve-standard), opacity var(--kima-duration-effects) var(--kima-curve-standard);border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.kima-date-picker__day[data-v-f55122f3]:hover:not(:disabled){background:var(--kima-color-layer-3)}.kima-date-picker__day[data-v-f55122f3]:focus-visible{outline:2px solid var(--kima-color-primary);outline-offset:-2px}.kima-date-picker__day--outside[data-v-f55122f3]{color:var(--kima-color-on-surface-variant);opacity:var(--kima-opacity-disabled)}.kima-date-picker__day--today[data-v-f55122f3]:not(.kima-date-picker__day--selected){color:var(--kima-color-primary);box-shadow:inset 0 0 0 1px var(--kima-color-primary)}.kima-date-picker__day--selected[data-v-f55122f3],.kima-date-picker__day--selected[data-v-f55122f3]:hover:not(:disabled){color:var(--kima-color-on-primary);background:var(--kima-color-primary)}.kima-date-picker__day[data-v-f55122f3]:disabled{cursor:not-allowed;opacity:var(--kima-opacity-disabled);pointer-events:none}@media (prefers-reduced-motion:reduce){.kima-date-picker__trigger[data-v-f55122f3],.kima-date-picker__day[data-v-f55122f3],.kima-date-picker__nav[data-v-f55122f3]{transition:none}}", Pp = ["aria-disabled"], Fp = [
|
|
8060
8060
|
"aria-expanded",
|
|
8061
8061
|
"aria-label",
|
|
8062
8062
|
"aria-required",
|
package/dist/kima-elements.js
CHANGED
|
@@ -57613,7 +57613,7 @@ function gV(e, t = null, n = null) {
|
|
|
57613
57613
|
}
|
|
57614
57614
|
return a;
|
|
57615
57615
|
}
|
|
57616
|
-
// node_modules/.pnpm/@tiptap+extension-link@3.
|
|
57616
|
+
// node_modules/.pnpm/@tiptap+extension-link@3.32.0_@tiptap+core@3.32.0_@tiptap+pm@3.32.0__@tiptap+pm@3.32.0/node_modules/@tiptap/extension-link/dist/index.js
|
|
57617
57617
|
var _V = "[\0- \xA0 -\u2029 ]", vV = new RegExp(_V), yV = RegExp(`${_V}$`), bV = RegExp(`${_V}+$`), xV = new RegExp(_V, "g");
|
|
57618
57618
|
function SV(e, t, n) {
|
|
57619
57619
|
let r = e.doc.resolve(t.to);
|
|
@@ -58932,7 +58932,7 @@ uR.create({
|
|
|
58932
58932
|
return this.options.bulletList !== !1 && e.push(HV.configure(this.options.bulletList)), this.options.listItem !== !1 && e.push(dH.configure(this.options.listItem)), this.options.listKeymap !== !1 && e.push(bH.configure(this.options.listKeymap)), this.options.orderedList !== !1 && e.push(BH.configure(this.options.orderedList)), this.options.taskItem !== !1 && e.push(WH.configure(this.options.taskItem)), this.options.taskList !== !1 && e.push(GH.configure(this.options.taskList)), e;
|
|
58933
58933
|
}
|
|
58934
58934
|
});
|
|
58935
|
-
// node_modules/.pnpm/@tiptap+extension-
|
|
58935
|
+
// node_modules/.pnpm/@tiptap+extension-paragraph@3.32.0_@tiptap+core@3.32.0_@tiptap+pm@3.32.0_/node_modules/@tiptap/extension-paragraph/dist/index.js
|
|
58936
58936
|
var KH = " ", qH = "\xA0", JH = jR.create({
|
|
58937
58937
|
name: "paragraph",
|
|
58938
58938
|
priority: 1e3,
|
|
@@ -60287,7 +60287,7 @@ var sW = /* @__PURE__ */ iW(rW, [["render", oW], ["__file", "/Users/mahmudulhasa
|
|
|
60287
60287
|
"stroke-width"
|
|
60288
60288
|
]));
|
|
60289
60289
|
}
|
|
60290
|
-
}, [["styles", [".kima-icon[data-v-
|
|
60290
|
+
}, [["styles", [".kima-icon[data-v-5c94f2ca]{vertical-align:middle;flex:none;display:inline-block}"]], ["__scopeId", "data-v-5c94f2ca"]]), lW = [["path", {
|
|
60291
60291
|
d: "M12.001 5.00003V19.002",
|
|
60292
60292
|
stroke: "currentColor",
|
|
60293
60293
|
strokeLinecap: "round",
|
|
@@ -120666,8 +120666,8 @@ function a9() {
|
|
|
120666
120666
|
} }
|
|
120667
120667
|
};
|
|
120668
120668
|
}
|
|
120669
|
-
// src/components/shell/app-shell.ce.vue?vue&type=style&index=0&inline&scoped=
|
|
120670
|
-
var uVe = "@keyframes kima-ripple-glow-
|
|
120669
|
+
// src/components/shell/app-shell.ce.vue?vue&type=style&index=0&inline&scoped=abea9686&lang.scss
|
|
120670
|
+
var uVe = "@keyframes kima-ripple-glow-abea9686{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-app-shell[data-v-abea9686]{grid-template-columns:minmax(0, var(--kima-shell-sidebar-width)) minmax(0, 1fr);gap:var(--kima-space-4);color:var(--kima-color-on-surface);font-family:var(--kima-font-family);grid-template-areas:\"header header\"\"sidebar main\"\"footer footer\";display:grid;position:relative}.kima-app-shell--narrow[data-v-abea9686]{grid-template-columns:minmax(0,1fr);grid-template-areas:\"header\"\"main\"\"footer\"}.kima-app-shell__header[data-v-abea9686]{align-items:center;gap:var(--kima-space-3);grid-area:header;display:flex}.kima-app-shell__sidebar[data-v-abea9686]{background:var(--kima-color-layer-1);padding:var(--kima-space-4);border-radius:var(--kima-radius-l);border:0;grid-area:sidebar}.kima-app-shell__main[data-v-abea9686]{grid-area:main;min-width:0}.kima-app-shell__main[data-v-abea9686]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-app-shell__footer[data-v-abea9686]{grid-area:footer}.kima-app-shell__skip[data-v-abea9686]{z-index:100;padding:var(--kima-space-3);color:var(--kima-color-on-primary);background:var(--kima-color-primary);clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.kima-app-shell__skip[data-v-abea9686]:focus{clip-path:none;width:auto;height:auto;overflow:visible}", dVe = ["href"], fVe = { class: "kima-app-shell__header" }, pVe = { key: 1 }, mVe = { key: 0 }, hVe = { class: "kima-app-shell__footer" }, gVe = { key: 0 }, _Ve = /*#__PURE__*/ Uc(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
|
|
120671
120671
|
__name: "app-shell.ce",
|
|
120672
120672
|
props: {
|
|
120673
120673
|
open: Boolean,
|
|
@@ -120742,7 +120742,7 @@ var uVe = "@keyframes kima-ripple-glow-4472f903{0%{opacity:.14}55%{opacity:.1}to
|
|
|
120742
120742
|
z("footer", hVe, [j(n) ? Jn((I(), L("div", gVe, null, 512)), [[j(r), "footer"]]) : F(t.$slots, "footer", {}, void 0, !0, 1)])
|
|
120743
120743
|
], 16));
|
|
120744
120744
|
}
|
|
120745
|
-
}), [["styles", [uVe]], ["__scopeId", "data-v-
|
|
120745
|
+
}), [["styles", [uVe]], ["__scopeId", "data-v-abea9686"]]);
|
|
120746
120746
|
// node_modules/.pnpm/@material+material-color-utilities@0.3.0/node_modules/@material/material-color-utilities/utils/math_utils.js
|
|
120747
120747
|
function o9(e) {
|
|
120748
120748
|
return e < 0 ? -1 : e === 0 ? 0 : 1;
|
|
@@ -122320,8 +122320,8 @@ function LVe(e, { isDark: t = !0, variant: n = B9, target: r } = {}) {
|
|
|
122320
122320
|
for (let [e, t] of Object.entries(i)) a.style.setProperty(`--kima-color-${e}`, t);
|
|
122321
122321
|
return i;
|
|
122322
122322
|
}
|
|
122323
|
-
// src/components/shell/config-provider.ce.vue?vue&type=style&index=0&inline&scoped=
|
|
122324
|
-
var RVe = ".kima-config-provider[data-v-
|
|
122323
|
+
// src/components/shell/config-provider.ce.vue?vue&type=style&index=0&inline&scoped=d9085095&lang.scss
|
|
122324
|
+
var RVe = ".kima-config-provider[data-v-d9085095]{color:var(--kima-color-on-surface);font-family:var(--kima-font-family);--kima-color-layer-1:color-mix(in srgb, var(--kima-color-on-surface) 5%, transparent);--kima-color-layer-2:color-mix(in srgb, var(--kima-color-on-surface) 10%, transparent);--kima-color-layer-3:color-mix(in srgb, var(--kima-color-on-surface) 15%, transparent);--kima-color-popup:var(--kima-color-surface-container-high);--kima-color-popup-large:var(--kima-color-surface-container-highest);--kima-color-primary-container-hover:color-mix(in srgb, var(--kima-color-primary-container) 90%, var(--kima-color-on-primary-container))}.kima-config-provider[data-kima-reduced-motion=reduce][data-v-d9085095]{--kima-duration-fast:0s;--kima-duration-medium:0s;--kima-duration-slow:0s;--kima-duration-slower:0s;--kima-duration-effects:0s}.kima-config-provider[data-kima-reduced-motion=reduce][data-v-d9085095] *{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}", zVe = [
|
|
122325
122325
|
"data-kima-seed",
|
|
122326
122326
|
"data-kima-variant",
|
|
122327
122327
|
"data-kima-theme",
|
|
@@ -122421,7 +122421,7 @@ var RVe = ".kima-config-provider[data-v-28f72ed9]{color:var(--kima-color-on-surf
|
|
|
122421
122421
|
}]
|
|
122422
122422
|
}), [j(n) ? Jn((I(), L("div", BVe, null, 512)), [[j(r)]]) : F(e.$slots, "default", { config: l.value }, void 0, !0, 1)], 16, zVe));
|
|
122423
122423
|
}
|
|
122424
|
-
}), [["styles", [RVe]], ["__scopeId", "data-v-
|
|
122424
|
+
}), [["styles", [RVe]], ["__scopeId", "data-v-d9085095"]]), HVe = ".kima-marquee[data-v-ac73236c]{min-width:0;color:var(--kima-color-on-surface)}.kima-marquee__viewport[data-v-ac73236c]{overflow:hidden}.kima-marquee__track[data-v-ac73236c]{width:max-content;max-width:100%;display:flex}.kima-marquee__track--moving[data-v-ac73236c]{max-width:none;animation:linear infinite kima-marquee-scroll-ac73236c}.kima-marquee__group[data-v-ac73236c]{align-items:center;gap:var(--kima-space-6);flex:none;padding-inline-end:var(--kima-space-6);display:flex}@keyframes kima-marquee-scroll-ac73236c{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.kima-marquee__track[data-v-ac73236c]{animation:none!important;transform:none!important}}@media (forced-colors:active){.kima-marquee__track[data-v-ac73236c]{animation:none}}", UVe = ["aria-label"], WVe = { class: "kima-marquee__viewport" }, GVe = /*#__PURE__*/ Uc(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
|
|
122425
122425
|
__name: "marquee.ce",
|
|
122426
122426
|
props: {
|
|
122427
122427
|
animated: Boolean,
|
|
@@ -122544,7 +122544,7 @@ var RVe = ".kima-config-provider[data-v-28f72ed9]{color:var(--kima-color-on-surf
|
|
|
122544
122544
|
}
|
|
122545
122545
|
}), [F(t.$slots, "default", {}, void 0, !0)], 16, qVe));
|
|
122546
122546
|
}
|
|
122547
|
-
}), [["styles", [KVe]], ["__scopeId", "data-v-2fe32054"]]), YVe = "@keyframes kima-ripple-glow-
|
|
122547
|
+
}), [["styles", [KVe]], ["__scopeId", "data-v-2fe32054"]]), YVe = "@keyframes kima-ripple-glow-0fd95ccf{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-sidebar[data-v-0fd95ccf]{background:var(--kima-color-layer-1);box-sizing:border-box;width:288px;max-width:100%;padding:var(--kima-space-3);border-radius:var(--kima-radius-l);transition:width var(--kima-duration-slow) var(--kima-curve-emphasized);border:0}.kima-sidebar--collapsed[data-v-0fd95ccf]{width:180px}.kima-sidebar--mobile[data-v-0fd95ccf]{width:100%}.kima-sidebar__body[data-v-0fd95ccf]:not(dialog){gap:var(--kima-space-4);flex-direction:column;display:flex}.kima-sidebar footer[data-v-0fd95ccf]{margin-top:auto}@media (prefers-reduced-motion:reduce){.kima-sidebar[data-v-0fd95ccf]{transition:none}}", XVe = ["data-collapsed", "aria-label"], ZVe = { key: 0 }, QVe = { key: 0 }, $Ve = { key: 0 }, eHe = /*#__PURE__*/ Uc(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
|
|
122548
122548
|
__name: "sidebar.ce",
|
|
122549
122549
|
props: {
|
|
122550
122550
|
items: {
|
|
@@ -122656,7 +122656,7 @@ var RVe = ".kima-config-provider[data-v-28f72ed9]{color:var(--kima-color-on-surf
|
|
|
122656
122656
|
"onUpdate:open"
|
|
122657
122657
|
]))], 16, XVe));
|
|
122658
122658
|
}
|
|
122659
|
-
}), [["styles", [YVe]], ["__scopeId", "data-v-
|
|
122659
|
+
}), [["styles", [YVe]], ["__scopeId", "data-v-0fd95ccf"]]), tHe = "kima-affix{display:contents}.kima-affix[data-v-f21e108b]{z-index:10;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);align-self:flex-start}", nHe = ["data-affixed"], rHe = /*#__PURE__*/ Uc(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
|
|
122660
122660
|
__name: "affix.ce",
|
|
122661
122661
|
props: {
|
|
122662
122662
|
placement: {
|