@varlet/ui 3.6.0-alpha.1728498016952 → 3.6.0

package/es/alert/Alert.mjs

@@ -0,0 +1,136 @@
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("alert");
+const iconTypeMap = {
+  success: "checkbox-marked-circle",
+  warning: "warning",
+  info: "information",
+  danger: "error"
+};
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.variant}`), _ctx.n(`--${_ctx.type}`), _ctx.formatElevation(_ctx.elevation, 2))),
+      style: _normalizeStyle({
+        "background-color": _ctx.color
+      }),
+      role: "alert"
+    },
+    [
+      _ctx.isInternalType || _ctx.$slots["icon"] ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("icon"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "icon", {}, () => [
+            _ctx.isInternalType ? (_openBlock(), _createBlock(_component_var_icon, {
+              key: 0,
+              name: _ctx.iconTypeMap[_ctx.type]
+            }, null, 8, ["name"])) : _createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
+      _renderSlot(_ctx.$slots, "content", {}, () => [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("content"))
+          },
+          [
+            _ctx.title || _ctx.$slots["title"] ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.n("title"))
+              },
+              [
+                _renderSlot(_ctx.$slots, "title", {}, () => [
+                  _createTextVNode(
+                    _toDisplayString(_ctx.title),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ],
+              2
+              /* CLASS */
+            )) : _createCommentVNode("v-if", true),
+            _ctx.message || _ctx.$slots["default"] ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: _normalizeClass(_ctx.n("message"))
+              },
+              [
+                _renderSlot(_ctx.$slots, "default", {}, () => [
+                  _createTextVNode(
+                    _toDisplayString(_ctx.message),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ],
+              2
+              /* CLASS */
+            )) : _createCommentVNode("v-if", true)
+          ],
+          2
+          /* CLASS */
+        )
+      ]),
+      _ctx.closeable ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.n("close-icon")),
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
+        },
+        [
+          _renderSlot(_ctx.$slots, "close-icon", {}, () => [
+            _createVNode(_component_var_icon, { name: "close-circle" })
+          ])
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarIcon
+  },
+  props,
+  setup(props2) {
+    const isInternalType = computed(() => ["info", "success", "danger", "warning"].includes(props2.type));
+    function handleClose(e) {
+      call(props2.onClose, e);
+    }
+    return {
+      n,
+      classes,
+      iconTypeMap,
+      isInternalType,
+      formatElevation,
+      handleClose
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/alert/alert.css

@@ -0,0 +1 @@
+:root { --alert-padding: 16px; --alert-border-radius: 4px; --alert-icon-size: 22px; --alert-icon-margin: 0 12px 0 0; --alert-close-icon-size: 22px; --alert-close-icon-margin: 2px 0 0 12px; --alert-standard-info-text-color: var(--color-on-info); --alert-standard-danger-text-color: var(--color-on-danger); --alert-standard-success-text-color: var(--color-on-success); --alert-standard-warning-text-color: var(--color-on-warning); --alert-danger-background: var(--color-danger); --alert-success-background: var(--color-success); --alert-warning-background: var(--color-warning); --alert-info-background: var(--color-info); --alert-tonal-danger-background: hsla(var(--hsl-danger), 0.12); --alert-tonal-success-background: hsla(var(--hsl-success), 0.12); --alert-tonal-warning-background: hsla(var(--hsl-warning), 0.12); --alert-tonal-info-background: hsla(var(--hsl-info), 0.12); --alert-tonal-danger-text-color: var(--color-danger); --alert-tonal-success-text-color: var(--color-success); --alert-tonal-warning-text-color: var(--color-warning); --alert-tonal-info-text-color: var(--color-info); --alert-message-font-size: 14px; --alert-title-font-size: 16px; --alert-title-font-weight: 500; --alert-message-margin-top: 4px; --alert-message-line-height: 1.5; --alert-title-line-height: 1.5;}.var-alert { display: flex; padding: var(--alert-padding); border-radius: var(--alert-border-radius);}.var-alert__icon { margin: var(--alert-icon-margin);}.var-alert__icon .var-icon { font-size: var(--alert-icon-size);}.var-alert__content { flex: 1;}.var-alert__title { font-size: var(--alert-title-font-size); font-weight: var(--alert-title-font-weight); line-height: var(--alert-title-line-height); word-break: normal; word-wrap: break-word;}.var-alert__title + .var-alert__message { margin-top: var(--alert-message-margin-top);}.var-alert__message { font-size: var(--alert-message-font-size); line-height: var(--alert-message-line-height);}.var-alert__close-icon { cursor: pointer; margin: var(--alert-close-icon-margin);}.var-alert__close-icon .var-icon[alert-cover] { font-size: var(--alert-close-icon-size);}.var-alert--outlined { border: thin solid currentColor; background-color: transparent;}.var-alert--outlined.var-alert--info { border-color: var(--alert-info-background); color: var(--alert-info-background);}.var-alert--outlined.var-alert--success { border-color: var(--alert-success-background); color: var(--alert-success-background);}.var-alert--outlined.var-alert--warning { border-color: var(--alert-warning-background); color: var(--alert-warning-background);}.var-alert--outlined.var-alert--danger { border-color: var(--alert-danger-background); color: var(--alert-danger-background);}.var-alert--tonal.var-alert--info { background-color: var(--alert-tonal-info-background); color: var(--alert-tonal-info-text-color);}.var-alert--tonal.var-alert--success { background-color: var(--alert-tonal-success-background); color: var(--alert-tonal-success-text-color);}.var-alert--tonal.var-alert--warning { background-color: var(--alert-tonal-warning-background); color: var(--alert-tonal-warning-text-color);}.var-alert--tonal.var-alert--danger { background-color: var(--alert-tonal-danger-background); color: var(--alert-tonal-danger-text-color);}.var-alert--standard.var-alert--info { background-color: var(--alert-info-background); color: var(--alert-standard-info-text-color);}.var-alert--standard.var-alert--success { background-color: var(--alert-success-background); color: var(--alert-standard-success-text-color);}.var-alert--standard.var-alert--warning { background-color: var(--alert-warning-background); color: var(--alert-standard-warning-text-color);}.var-alert--standard.var-alert--danger { background-color: var(--alert-danger-background); color: var(--alert-standard-danger-text-color);}

package/es/alert/index.mjs

@@ -0,0 +1,9 @@
+import Alert from "./Alert.mjs";
+import { withInstall } from "../utils/components.mjs";
+withInstall(Alert);
+const _AlertComponent = Alert;
+var stdin_default = Alert;
+export {
+  _AlertComponent,
+  stdin_default as default
+};

package/es/alert/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "info"
+  },
+  variant: {
+    type: String,
+    default: "standard"
+  },
+  color: String,
+  title: String,
+  message: String,
+  closeable: Boolean,
+  elevation: {
+    type: [Boolean, String, Number],
+    default: false
+  },
+  onClose: defineListenerProp()
+};
+export {
+  props
+};

package/es/alert/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../icon/icon.css'
+import '../alert.css'
+import '../AlertSfc.css'

package/es/code/Code.mjs

@@ -43,12 +43,12 @@ const __sfc__ = defineComponent({
     });
     if (highlighter) {
       watch(
-        () => [highlighter.value, props2.code, props2.language, normalizedTheme.value],
-        (_0) => __async(this, [_0], function* ([highlighter2, code, lang, theme2]) {
+        () => [highlighter.value, props2.code, props2.language, normalizedTheme.value, props2.trim],
+        (_0) => __async(this, [_0], function* ([highlighter2, code, lang, theme2, trim]) {
           if (!highlighter2) {
             return;
           }
-          highlightedCode.value = yield highlighter2.codeToHtml(code, { lang, theme: theme2 });
+          highlightedCode.value = yield highlighter2.codeToHtml(trim ? code.trim() : code, { lang, theme: theme2 });
         }),
         { immediate: true }
       );

package/es/code/props.mjs

@@ -3,13 +3,13 @@ const props = {
     type: String,
     default: ""
   },
-  language: {
-    type: String
-  },
-  theme: {
-    type: String
-  },
-  wordWrap: Boolean
+  language: String,
+  theme: String,
+  wordWrap: Boolean,
+  trim: {
+    type: Boolean,
+    default: true
+  }
 };
 export {
   props

package/es/index.bundle.mjs

@@ -1,4 +1,5 @@
 import ActionSheet from './action-sheet/index.mjs'
+import Alert from './alert/index.mjs'
 import AppBar from './app-bar/index.mjs'
 import AutoComplete from './auto-complete/index.mjs'
 import Avatar from './avatar/index.mjs'
@@ -91,6 +92,7 @@ import Uploader from './uploader/index.mjs'
 import Watermark from './watermark/index.mjs'
 
 export * from './action-sheet/index.mjs'
+export * from './alert/index.mjs'
 export * from './app-bar/index.mjs'
 export * from './auto-complete/index.mjs'
 export * from './avatar/index.mjs'
@@ -183,6 +185,7 @@ export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
 import './action-sheet/style/index.mjs'
+import './alert/style/index.mjs'
 import './app-bar/style/index.mjs'
 import './auto-complete/style/index.mjs'
 import './avatar/style/index.mjs'
@@ -274,10 +277,11 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.6.0-alpha.1728498016952'
+const version = '3.6.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
+  Alert.install && app.use(Alert)
   AppBar.install && app.use(AppBar)
   AutoComplete.install && app.use(AutoComplete)
   Avatar.install && app.use(Avatar)
@@ -374,6 +378,7 @@ export {
   version,
   install,
   ActionSheet,
+  Alert,
   AppBar,
   AutoComplete,
   Avatar,
@@ -470,6 +475,7 @@ export default {
   version,
   install,
   ActionSheet,
+  Alert,
   AppBar,
   AutoComplete,
   Avatar,

package/es/index.mjs

@@ -1,4 +1,5 @@
 import ActionSheet from './action-sheet/index.mjs'
+import Alert from './alert/index.mjs'
 import AppBar from './app-bar/index.mjs'
 import AutoComplete from './auto-complete/index.mjs'
 import Avatar from './avatar/index.mjs'
@@ -91,6 +92,7 @@ import Uploader from './uploader/index.mjs'
 import Watermark from './watermark/index.mjs'
 
 export * from './action-sheet/index.mjs'
+export * from './alert/index.mjs'
 export * from './app-bar/index.mjs'
 export * from './auto-complete/index.mjs'
 export * from './avatar/index.mjs'
@@ -182,10 +184,11 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.6.0-alpha.1728498016952'
+const version = '3.6.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
+  Alert.install && app.use(Alert)
   AppBar.install && app.use(AppBar)
   AutoComplete.install && app.use(AutoComplete)
   Avatar.install && app.use(Avatar)
@@ -282,6 +285,7 @@ export {
   version,
   install,
   ActionSheet,
+  Alert,
   AppBar,
   AutoComplete,
   Avatar,
@@ -378,6 +382,7 @@ export default {
   version,
   install,
   ActionSheet,
+  Alert,
   AppBar,
   AutoComplete,
   Avatar,