init

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

@@ -0,0 +1,148 @@
+"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 form = require("../../../../form.js");
+const uni_modules_nutuiUni_components__utils_is = require("../_utils/is.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const switchProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 开关状态
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  /**
+   * @description 禁用状态
+   * @deprecated 即将弃用，请使用`disabled`
+   */
+  disable: Boolean,
+  /**
+   * @description 禁用状态
+   */
+  disabled: Boolean,
+  /**
+   * @description 打开时的背景颜色
+   */
+  activeColor: String,
+  /**
+   * @description 关闭时的背景颜色
+   */
+  inactiveColor: String,
+  /**
+   * @description 打开时文字描述
+   */
+  activeText: String,
+  /**
+   * @description 关闭时文字描述
+   */
+  inactiveText: String,
+  /**
+   * @description 打开时组件的值
+   */
+  activeValue: {
+    type: [String, Number, Boolean],
+    default: true
+  },
+  /**
+   * @description 关闭组件的值
+   */
+  inactiveValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  /**
+   * @description 加载状态
+   */
+  loading: Boolean
+};
+const switchEmits = {
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (val) => uni_modules_nutuiUni_components__utils_is.isBoolean(val) || uni_modules_nutuiUni_components__utils_is.isNumber(val) || uni_modules_nutuiUni_components__utils_is.isString(val),
+  [uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (val, evt) => (uni_modules_nutuiUni_components__utils_is.isBoolean(val) || uni_modules_nutuiUni_components__utils_is.isNumber(val) || uni_modules_nutuiUni_components__utils_is.isString(val)) && evt instanceof Object
+};
+if (!Math) {
+  NutIcon();
+}
+const NutIcon = () => "../icon/icon.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-switch`;
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: switchProps,
+  emits: switchEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const legacyDisabled = common_vendor.computed(() => props.disabled || props.disable);
+    const disabled = form.useFormDisabled(legacyDisabled);
+    const isActive = common_vendor.computed(() => props.modelValue === props.activeValue);
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
+        [isActive.value ? "nut-switch-open" : "nut-switch-close"]: true,
+        [`${componentName}-disabled`]: disabled.value,
+        [`${componentName}-base`]: true
+      });
+    });
+    const styles = common_vendor.computed(() => {
+      const obj = {
+        backgroundColor: isActive.value ? props.activeColor : props.inactiveColor
+      };
+      return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
+    });
+    let updateType = "";
+    function onClick(event) {
+      if (disabled.value || props.loading)
+        return;
+      const value = isActive.value ? props.inactiveValue : props.activeValue;
+      updateType = "click";
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, value);
+      emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, value, event);
+    }
+    common_vendor.watch(
+      () => props.modelValue,
+      (v) => {
+        if (updateType === "click")
+          updateType = "";
+        else
+          emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, v);
+      }
+    );
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: _ctx.loading
+      }, _ctx.loading ? {
+        b: common_vendor.p({
+          name: "loading1",
+          ["custom-color"]: _ctx.activeColor
+        })
+      } : {}, {
+        c: _ctx.activeText
+      }, _ctx.activeText ? {
+        d: common_vendor.t(_ctx.activeText),
+        e: !isActive.value ? 1 : "",
+        f: common_vendor.t(_ctx.inactiveText),
+        g: isActive.value ? 1 : ""
+      } : {}, {
+        h: common_vendor.n(classes.value),
+        i: common_vendor.s(styles.value),
+        j: common_vendor.o(
+          //@ts-ignore
+          (...args) => onClick && onClick(...args)
+        )
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/switch/switch.js.map

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

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-icon": "../icon/icon"
+  }
+}

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

@@ -0,0 +1 @@
+<view class="{{h}}" style="{{i}}" bindtap="{{j}}"><view class="nut-switch-button"><block wx:if="{{a}}"><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><nut-icon wx:if="{{b}}" u-i="3815599a-0" bind:__l="__l" u-p="{{b}}"/></block></block><block wx:if="{{c}}"><view class="{{['nut-switch-label', 'open', e && 'nut-hidden']}}">{{d}}</view><view class="{{['nut-switch-label', 'close', g && 'nut-hidden']}}">{{f}}</view></block></view></view>

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

@@ -0,0 +1,107 @@
+/**
+ * 这里是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-theme-dark .nut-switch.nut-switch-close {
+  background-color: var(--nut-dark-background4, #323233);
+}
+.nut-switch {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--nut-primary-color, #fa2c19);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+  border-radius: var(--nut-switch-border-radius, 21px);
+}
+.nut-switch .nut-icon-loading1 {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+.nut-switch.nut-switch-close {
+  background-color: var(--nut-switch-close-bg-color, #ebebeb);
+}
+.nut-switch .nut-switch-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nut-white, #fff);
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+.nut-switch .nut-switch-button .nut-switch-label {
+  font-size: var(--nut-font-size-1, 12px);
+  color: var(--nut-white, #fff);
+}
+.nut-switch .nut-switch-button .nut-switch-label.open {
+  transform: translateX(-16px);
+}
+.nut-switch .nut-switch-button .nut-switch-label.close {
+  transform: translateX(16px);
+}
+.nut-switch.nut-switch-disabled {
+  opacity: 0.6;
+}
+.nut-switch.nut-switch-base {
+  min-width: var(--nut-switch-width, 36px);
+  height: var(--nut-switch-height, 21px);
+  overflow: hidden;
+  line-height: var(--nut-switch-line-height, 21px);
+}
+.nut-switch.nut-switch-base .nut-switch-button {
+  width: var(--nut-switch-inside-width, 13px);
+  height: var(--nut-switch-inside-height, 13px);
+  transform: var(--nut-switch-inside-close-transform, translateX(30%));
+}
+.nut-switch.nut-switch-base.nut-switch-open .nut-switch-button {
+  transform: var(--nut-switch-inside-open-transform, translateX(146%));
+}