处理数据看板

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/calendar/calendar.js

@@ -0,0 +1,453 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+const uni_modules_nutuiUni_components__utils_date = require("../_utils/date.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const popup = require("../../../../popup.js");
+const calendarProps = {
+  ...popup.popupProps,
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 是否可见
+   */
+  visible: Boolean,
+  /**
+   * @description 类型，日期单选 `one`，区间选择 `range`，日期多选 `multiple`，周选择 `week`
+   */
+  type: uni_modules_nutuiUni_components__utils_props.makeStringProp("one"),
+  /**
+   * @description 是否弹窗状态展示
+   */
+  poppable: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 自动回填
+   */
+  isAutoBackFill: Boolean,
+  /**
+   * @description 显示标题
+   */
+  title: uni_modules_nutuiUni_components__utils_props.makeStringProp("日期选择"),
+  /**
+   * @description 默认值，单个日期选择为 `string`，其他为 `string[]`
+   */
+  defaultValue: {
+    type: [String, Array]
+  },
+  /**
+   * @description 开始日期
+   */
+  startDate: uni_modules_nutuiUni_components__utils_props.makeStringProp(uni_modules_nutuiUni_components__utils_date.getDay(0)),
+  /**
+   * @description 结束日期
+   */
+  endDate: uni_modules_nutuiUni_components__utils_props.makeStringProp(uni_modules_nutuiUni_components__utils_date.getDay(365)),
+  /**
+   * @description 范围选择，开始信息文案
+   */
+  startText: uni_modules_nutuiUni_components__utils_props.makeStringProp("开始"),
+  /**
+   * @description 范围选择，结束信息文案
+   */
+  endText: uni_modules_nutuiUni_components__utils_props.makeStringProp("结束"),
+  /**
+   * @description 底部确认按钮文案
+   */
+  confirmText: uni_modules_nutuiUni_components__utils_props.makeStringProp("确认"),
+  /**
+   * @description 是否展示今天标记
+   */
+  showToday: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 是否在展示日历标题
+   */
+  showTitle: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 是否展示日期标题
+   */
+  showSubTitle: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 是否启动滚动动画
+   */
+  toDateAnimation: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 设置周起始日
+   */
+  firstDayOfWeek: uni_modules_nutuiUni_components__utils_props.makeNumberProp(0),
+  /**
+   * @description 一个用来判断该日期是否被禁用的函数，接受一个 `年 - 月 - 日` 作为参数。 应该返回一个 Boolean 值。
+   * @default undefined
+   */
+  disabledDate: Function,
+  /**
+   * @description 是否使用 footer 插槽，如果使用,此值必须为 true
+   */
+  footerSlot: Boolean,
+  /**
+   * @description 是否使用 btn 插槽，如果使用,此值必须为 true
+   */
+  btnSlot: Boolean,
+  /**
+   * @description 自定义弹窗样式
+   */
+  popStyle: {
+    type: [String, Object, Array],
+    default: ""
+  },
+  /**
+   * @description 遮罩显示时的背景是否锁定
+   */
+  lockScroll: uni_modules_nutuiUni_components__utils_props.truthProp
+};
+const calendarEmits = {
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_VISIBLE_EVENT]: (value) => true,
+  [uni_modules_nutuiUni_components__constants_event.CHOOSE_EVENT]: (value) => true,
+  [uni_modules_nutuiUni_components__constants_event.SELECT_EVENT]: (value) => true,
+  clickCloseIcon: () => true,
+  clickOverlay: () => true,
+  [uni_modules_nutuiUni_components__constants_event.OPEN_EVENT]: () => true,
+  [uni_modules_nutuiUni_components__constants_event.OPENED_EVENT]: () => true,
+  [uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT]: () => true,
+  [uni_modules_nutuiUni_components__constants_event.CLOSED_EVENT]: () => true
+};
+if (!Math) {
+  (NutCalendarItem + NutPopup)();
+}
+const NutCalendarItem = () => "../calendaritem/calendaritem.js";
+const NutPopup = () => "../popup/popup.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-calendar`;
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: calendarProps,
+  emits: calendarEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = common_vendor.useSlots();
+    const innerVisible = common_vendor.computed({
+      get() {
+        return props.visible;
+      },
+      set(value) {
+        emit("update:visible", value);
+      }
+    });
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName);
+    });
+    const popClasses = common_vendor.computed(() => {
+      return `${componentName}__popup ${props.popClass}`;
+    });
+    const popStyles = common_vendor.computed(() => {
+      return [{
+        height: "85vh"
+      }, props.popStyle];
+    });
+    const overlayClasses = common_vendor.computed(() => {
+      return `${componentName}__overlay ${props.overlayClass}`;
+    });
+    const calendarRef = common_vendor.ref(null);
+    function scrollToDate(date) {
+      var _a;
+      (_a = calendarRef.value) == null ? void 0 : _a.scrollToDate(date);
+    }
+    function initPosition() {
+      var _a;
+      (_a = calendarRef.value) == null ? void 0 : _a.initPosition();
+    }
+    function close() {
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_VISIBLE_EVENT, false);
+      emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT);
+    }
+    function choose(param) {
+      close();
+      emit(uni_modules_nutuiUni_components__constants_event.CHOOSE_EVENT, param);
+    }
+    function select(param) {
+      emit(uni_modules_nutuiUni_components__constants_event.SELECT_EVENT, param);
+    }
+    function update() {
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_VISIBLE_EVENT, false);
+    }
+    function handleCloseIconClick() {
+      emit("clickCloseIcon");
+    }
+    function handleOverlayClick() {
+      emit("clickOverlay");
+    }
+    function handleOpen() {
+      emit(uni_modules_nutuiUni_components__constants_event.OPEN_EVENT);
+    }
+    function handleOpened() {
+      emit(uni_modules_nutuiUni_components__constants_event.OPENED_EVENT);
+      if (props.defaultValue) {
+        if (Array.isArray(props.defaultValue)) {
+          if (props.defaultValue.length > 0) {
+            scrollToDate(props.defaultValue[0]);
+          }
+        } else {
+          scrollToDate(props.defaultValue);
+        }
+      }
+    }
+    function handleClose() {
+      emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT);
+    }
+    function handleClosed() {
+      emit(uni_modules_nutuiUni_components__constants_event.CLOSED_EVENT);
+    }
+    __expose({
+      scrollToDate,
+      initPosition
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: props.poppable
+      }, props.poppable ? common_vendor.e({
+        b: common_vendor.unref(slots).btn
+      }, common_vendor.unref(slots).btn ? {} : {}, {
+        c: common_vendor.unref(slots).day
+      }, common_vendor.unref(slots).day ? {
+        d: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("day", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "day",
+          path: "d",
+          vueId: "4c9799f0-1,4c9799f0-0"
+        })
+      } : {}, {
+        e: common_vendor.unref(slots).topInfo
+      }, common_vendor.unref(slots).topInfo ? {
+        f: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("topInfo", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "topInfo",
+          path: "f",
+          vueId: "4c9799f0-1,4c9799f0-0"
+        })
+      } : {}, {
+        g: common_vendor.unref(slots).bottomInfo
+      }, common_vendor.unref(slots).bottomInfo ? {
+        h: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("bottomInfo", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "bottomInfo",
+          path: "h",
+          vueId: "4c9799f0-1,4c9799f0-0"
+        })
+      } : {}, {
+        i: common_vendor.unref(slots).footer
+      }, common_vendor.unref(slots).footer ? {
+        j: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("footer", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "footer",
+          path: "j",
+          vueId: "4c9799f0-1,4c9799f0-0"
+        })
+      } : {}, {
+        k: common_vendor.sr(calendarRef, "4c9799f0-1,4c9799f0-0", {
+          "k": "calendarRef"
+        }),
+        l: common_vendor.o(choose),
+        m: common_vendor.o(select),
+        n: common_vendor.o(update),
+        o: common_vendor.o(close),
+        p: common_vendor.p({
+          visible: innerVisible.value,
+          type: props.type,
+          poppable: props.poppable,
+          ["is-auto-back-fill"]: props.isAutoBackFill,
+          title: props.title,
+          ["default-value"]: props.defaultValue,
+          ["start-date"]: props.startDate,
+          ["end-date"]: props.endDate,
+          ["start-text"]: props.startText,
+          ["end-text"]: props.endText,
+          ["confirm-text"]: props.confirmText,
+          ["show-today"]: props.showToday,
+          ["show-title"]: props.showTitle,
+          ["show-sub-title"]: props.showSubTitle,
+          ["to-date-animation"]: props.toDateAnimation,
+          ["first-day-of-week"]: props.firstDayOfWeek,
+          ["disabled-date"]: props.disabledDate,
+          ["footer-slot"]: props.footerSlot,
+          ["btn-slot"]: props.btnSlot
+        }),
+        q: common_vendor.o(handleCloseIconClick),
+        r: common_vendor.o(handleOverlayClick),
+        s: common_vendor.o(handleOpen),
+        t: common_vendor.o(handleOpened),
+        v: common_vendor.o(handleClose),
+        w: common_vendor.o(handleClosed),
+        x: common_vendor.o(($event) => innerVisible.value = $event),
+        y: common_vendor.p({
+          ["custom-class"]: popClasses.value,
+          ["custom-style"]: popStyles.value,
+          ["overlay-class"]: overlayClasses.value,
+          ["overlay-style"]: props.overlayStyle,
+          position: "bottom",
+          round: true,
+          closeable: props.closeable,
+          ["close-icon"]: props.closeIcon,
+          ["close-icon-position"]: props.closeIconPosition,
+          ["z-index"]: props.zIndex,
+          ["lock-scroll"]: props.lockScroll,
+          overlay: props.overlay,
+          ["close-on-click-overlay"]: props.closeOnClickOverlay,
+          ["destroy-on-close"]: false,
+          visible: innerVisible.value
+        })
+      }) : common_vendor.e({
+        z: common_vendor.unref(slots).btn
+      }, common_vendor.unref(slots).btn ? {} : {}, {
+        A: common_vendor.unref(slots).day
+      }, common_vendor.unref(slots).day ? {
+        B: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("day", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "day",
+          path: "B",
+          vueId: "4c9799f0-2"
+        })
+      } : {}, {
+        C: common_vendor.unref(slots).topInfo
+      }, common_vendor.unref(slots).topInfo ? {
+        D: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("topInfo", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "topInfo",
+          path: "D",
+          vueId: "4c9799f0-2"
+        })
+      } : {}, {
+        E: common_vendor.unref(slots).bottomInfo
+      }, common_vendor.unref(slots).bottomInfo ? {
+        F: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("bottomInfo", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "bottomInfo",
+          path: "F",
+          vueId: "4c9799f0-2"
+        })
+      } : {}, {
+        G: common_vendor.unref(slots).footer
+      }, common_vendor.unref(slots).footer ? {
+        H: common_vendor.w(({
+          date
+        }, s0, i0) => {
+          return {
+            a: common_vendor.r("footer", {
+              date
+            }),
+            b: i0,
+            c: s0
+          };
+        }, {
+          name: "footer",
+          path: "H",
+          vueId: "4c9799f0-2"
+        })
+      } : {}, {
+        I: common_vendor.sr(calendarRef, "4c9799f0-2", {
+          "k": "calendarRef"
+        }),
+        J: common_vendor.o(choose),
+        K: common_vendor.o(select),
+        L: common_vendor.o(close),
+        M: common_vendor.p({
+          visible: innerVisible.value,
+          type: props.type,
+          poppable: props.poppable,
+          ["is-auto-back-fill"]: props.isAutoBackFill,
+          title: props.title,
+          ["default-value"]: props.defaultValue,
+          ["start-date"]: props.startDate,
+          ["end-date"]: props.endDate,
+          ["start-text"]: props.startText,
+          ["end-text"]: props.endText,
+          ["confirm-text"]: props.confirmText,
+          ["show-today"]: props.showToday,
+          ["show-title"]: props.showTitle,
+          ["show-sub-title"]: props.showSubTitle,
+          ["to-date-animation"]: props.toDateAnimation,
+          ["first-day-of-week"]: props.firstDayOfWeek,
+          ["disabled-date"]: props.disabledDate,
+          ["footer-slot"]: props.footerSlot,
+          ["btn-slot"]: props.btnSlot
+        })
+      }), {
+        N: common_vendor.n(classes.value),
+        O: common_vendor.s(props.customStyle)
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/calendar/calendar.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/calendar/calendar.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-calendar-item": "../calendaritem/calendaritem",
+    "nut-popup": "../popup/popup"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/calendar/calendar.wxml

@@ -0,0 +1 @@
+<view class="{{N}}" style="{{O}}"><block wx:if="{{a}}"><nut-popup wx:if="{{y}}" u-s="{{['d']}}" bindclickCloseIcon="{{q}}" bindclickOverlay="{{r}}" bindopen="{{s}}" bindopened="{{t}}" bindclose="{{v}}" bindclosed="{{w}}" u-i="4c9799f0-0" bind:__l="__l" bindupdateVisible="{{x}}" u-p="{{y}}"><nut-calendar-item wx:if="{{p}}" class="r" u-s="{{['btn','day','topInfo','bottomInfo','footer']}}" u-r="calendarRef" bindchoose="{{l}}" bindselect="{{m}}" bindupdate="{{n}}" bindclose="{{o}}" u-i="4c9799f0-1,4c9799f0-0" bind:__l="__l" u-p="{{p}}"><view wx:if="{{b}}" slot="btn"><slot name="btn"/></view><block wx:if="{{c}}"><view wx:for="{{d}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="day"/></view></block><block wx:if="{{e}}"><view wx:for="{{f}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="topInfo"/></view></block><block wx:if="{{g}}"><view wx:for="{{h}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="bottomInfo"/></view></block><block wx:if="{{i}}"><view wx:for="{{j}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="footer"/></view></block></nut-calendar-item></nut-popup></block><block wx:else><nut-calendar-item wx:if="{{M}}" class="r" u-s="{{['btn','day','topInfo','bottomInfo','footer']}}" u-r="calendarRef" bindchoose="{{J}}" bindselect="{{K}}" bindclose="{{L}}" u-i="4c9799f0-2" bind:__l="__l" u-p="{{M}}"><view wx:if="{{z}}" slot="btn"><slot name="btn"/></view><block wx:if="{{A}}"><view wx:for="{{B}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="day"/></view></block><block wx:if="{{C}}"><view wx:for="{{D}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="topInfo"/></view></block><block wx:if="{{E}}"><view wx:for="{{F}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="bottomInfo"/></view></block><block wx:if="{{G}}"><view wx:for="{{H}}" wx:for-item="v0" wx:key="b" slot="{{v0.c}}"><slot name="footer"/></view></block></nut-calendar-item></block></view>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/calendar/calendar.wxss

@@ -0,0 +1,170 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.nut-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
+}
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}
+.nut-theme-dark .nut-popup {
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-popup__close-icon {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active {
+  transition-timing-function: ease;
+  transition-property: opacity;
+}
+.nut-popup-slide-center-enter-from, .nut-popup-slide-center-leave-to {
+  opacity: 0;
+}
+.nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active {
+  transform: translate(0, -100%);
+}
+.nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active {
+  transform: translate(100%, 0);
+}
+.nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active {
+  transform: translate(0, 100%);
+}
+.nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active {
+  transform: translate(-100%, 0);
+}
+.nut-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.nut-popup--center.round {
+  border-radius: var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--bottom.round {
+  border-radius: var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0;
+}
+.nut-popup--bottom--safebottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.nut-popup--right {
+  top: 0;
+  right: 0;
+}
+.nut-popup--right.round {
+  border-radius: var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--left {
+  top: 0;
+  left: 0;
+}
+.nut-popup--left.round {
+  border-radius: 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0;
+}
+.nut-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--top.round {
+  border-radius: 0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--top--safetop {
+  padding-top: var(--status-bar-height);
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: var(--nut-white, #fff);
+  -webkit-overflow-scrolling: touch;
+}
+.nut-popup__close-icon {
+  position: absolute !important;
+  z-index: 1;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  color: #969799;
+  text-align: center;
+  cursor: pointer;
+}
+.nut-popup__close-icon:active {
+  opacity: 0.7;
+}
+.nut-popup__close-icon--top-left {
+  top: var(--nut-popup-close-icon-margin, 16px);
+  left: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--top-right {
+  top: var(--nut-popup-close-icon-margin, 16px);
+  right: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--bottom-left {
+  bottom: var(--nut-popup-close-icon-margin, 16px);
+  left: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--bottom-right {
+  right: var(--nut-popup-close-icon-margin, 16px);
+  bottom: var(--nut-popup-close-icon-margin, 16px);
+}