vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/components/JsonPretty/components/CheckController/index.vue

@@ -1,136 +1,136 @@
-<template>
-  <view
-    :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
-    @click="onClick">
-    <!-- <view
-      :class="`json-pretty-check-controller-inner is-${uiType}`"
-      @click="onChange"
-    >
-    </view>
-    <input
-      :checked="model"
-      :class="`json-pretty-check-controller-original is-${uiType}`"
-      :type="uiType"
-      @change="onChange"
-    /> -->
-
-    <checkbox
-      v-if="uiType === 'checkbox'"
-      :checked="model"
-      :color="themeColor"
-      style="transform: scale(0.6)"
-      @change="onChange" />
-    <radio
-      v-if="uiType === 'radio'"
-      :checked="model"
-      :color="themeColor"
-      style="transform: scale(0.6)"
-      @change="onChange" />
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { getThemeMainColor } from '../../../../styles/theme';
-const props = defineProps<{
-  theme?: string;
-  checked: boolean;
-  isMultiple: boolean;
-}>();
-
-const themeColor = computed(() => getThemeMainColor(props.theme));
-const emit = defineEmits<{
-  (e: 'change', value: boolean): void;
-  (e: 'update:modelValue', value: boolean): void;
-}>();
-
-const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
-const model = computed({
-  get: (): boolean => props.checked,
-  set: (val) => emit('update:modelValue', val),
-});
-
-function onChange() {
-  emit('change', !model.value);
-}
-
-function onClick(e: MouseEvent) {
-  e.stopPropagation();
-}
-</script>
-
-<style>
-.json-pretty-check-controller {
-  position: absolute;
-  left: 0;
-}
-
-.json-pretty-check-controller.is-checked .json-pretty-check-controller-inner {
-  background-color: var(--json-pretty-color-primary);
-  border-color: var(--json-pretty-color-primary);
-}
-
-.json-pretty-check-controller.is-checked
-  .json-pretty-check-controller-inner.is-checkbox::after {
-  transform: rotate(45deg) scaleY(1);
-}
-
-.json-pretty-check-controller.is-checked
-  .json-pretty-check-controller-inner.is-radio::after {
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.json-pretty-check-controller .json-pretty-check-controller-inner {
-  display: inline-block;
-  position: relative;
-  border: 1px solid var(--json-pretty-border-color);
-  border-radius: 2px;
-  vertical-align: middle;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  z-index: 1;
-  cursor: pointer;
-  transition:
-    border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
-}
-
-.json-pretty-check-controller .json-pretty-check-controller-inner::after {
-  box-sizing: content-box;
-  content: '';
-  border: 2px solid #fff;
-  border-left: 0;
-  border-top: 0;
-  height: 8px;
-  left: 4px;
-  position: absolute;
-  top: 1px;
-  transform: rotate(45deg) scaleY(0);
-  width: 4px;
-  transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
-  transform-origin: center;
-}
-
-.json-pretty-check-controller .json-pretty-check-controller-inner.is-radio {
-  border-radius: 100%;
-}
-
-.json-pretty-check-controller
-  .json-pretty-check-controller-inner.is-radio::after {
-  border-radius: 100%;
-  height: 4px;
-  background-color: #fff;
-  left: 50%;
-  top: 50%;
-}
-
-.json-pretty-check-controller .json-pretty-check-controller-original {
-  opacity: 0;
-  outline: none;
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  margin: 0;
-}
-</style>
+<template>
+  <view
+    :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
+    @click="onClick">
+    <!-- <view
+      :class="`json-pretty-check-controller-inner is-${uiType}`"
+      @click="onChange"
+    >
+    </view>
+    <input
+      :checked="model"
+      :class="`json-pretty-check-controller-original is-${uiType}`"
+      :type="uiType"
+      @change="onChange"
+    /> -->
+
+    <checkbox
+      v-if="uiType === 'checkbox'"
+      :checked="model"
+      :color="themeColor"
+      style="transform: scale(0.6)"
+      @change="onChange" />
+    <radio
+      v-if="uiType === 'radio'"
+      :checked="model"
+      :color="themeColor"
+      style="transform: scale(0.6)"
+      @change="onChange" />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getThemeMainColor } from '../../../../styles/theme';
+const props = defineProps<{
+  theme?: string;
+  checked: boolean;
+  isMultiple: boolean;
+}>();
+
+const themeColor = computed(() => getThemeMainColor(props.theme));
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void;
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
+const model = computed({
+  get: (): boolean => props.checked,
+  set: (val) => emit('update:modelValue', val),
+});
+
+function onChange() {
+  emit('change', !model.value);
+}
+
+function onClick(e: MouseEvent) {
+  e.stopPropagation();
+}
+</script>
+
+<style>
+.json-pretty-check-controller {
+  position: absolute;
+  left: 0;
+}
+
+.json-pretty-check-controller.is-checked .json-pretty-check-controller-inner {
+  background-color: var(--json-pretty-color-primary);
+  border-color: var(--json-pretty-color-primary);
+}
+
+.json-pretty-check-controller.is-checked
+  .json-pretty-check-controller-inner.is-checkbox::after {
+  transform: rotate(45deg) scaleY(1);
+}
+
+.json-pretty-check-controller.is-checked
+  .json-pretty-check-controller-inner.is-radio::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.json-pretty-check-controller .json-pretty-check-controller-inner {
+  display: inline-block;
+  position: relative;
+  border: 1px solid var(--json-pretty-border-color);
+  border-radius: 2px;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  z-index: 1;
+  cursor: pointer;
+  transition:
+    border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+}
+
+.json-pretty-check-controller .json-pretty-check-controller-inner::after {
+  box-sizing: content-box;
+  content: '';
+  border: 2px solid #fff;
+  border-left: 0;
+  border-top: 0;
+  height: 8px;
+  left: 4px;
+  position: absolute;
+  top: 1px;
+  transform: rotate(45deg) scaleY(0);
+  width: 4px;
+  transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
+  transform-origin: center;
+}
+
+.json-pretty-check-controller .json-pretty-check-controller-inner.is-radio {
+  border-radius: 100%;
+}
+
+.json-pretty-check-controller
+  .json-pretty-check-controller-inner.is-radio::after {
+  border-radius: 100%;
+  height: 4px;
+  background-color: #fff;
+  left: 50%;
+  top: 50%;
+}
+
+.json-pretty-check-controller .json-pretty-check-controller-original {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  margin: 0;
+}
+</style>