git config

uni_modules/jc-tailwind/components/Demo/Demo.vue

@@ -1,67 +1,67 @@
 <script setup>
-	// 废弃
-	import { ref, computed, getCurrentInstance, onMounted, nextTick } from 'vue'
-	const props = defineProps({
-		title: '',
-		maxHeight: {
-			default: 200
-		}
-	})
-	const instance = getCurrentInstance()
-	const demoContentRef = ref()
-	const more = ref(true)
-	const showMore = ref(false)
-	const styles = computed(() => {
-		return more.value ? {
-			maxHeight: `${props.maxHeight}rpx`,
-			overflow: 'hidden',
-		} : {}
-	})
-
-
-	onMounted(getDemoContentRef)
-	nextTick(getDemoContentRef)
-
-	function callback(data) {
-		const { height } = data
-		showMore.value = height > uni.upx2px(props.maxHeight)
-		more.value = height > uni.upx2px(props.maxHeight)
-	}
-
-	function getDemoContentRef() {
-		let query = uni.createSelectorQuery().in(instance)
-		query.select('.demoContent')
-			.fields({ rect: true, size: true, scrollOffset: true }, callback)
-			// .boundingClientRect(callback)
-			.exec()
-	}
-
-	function toggleMore() {
-		more.value = !more.value
-	}
-</script>
-
-<template>
-	<view>
-		<view class="p-2 bg-slate-500 sticky t-0 flex item-center">
-			<view class="flex-1 font-medium font-bold text-base text-slate-50">{{title}}</view>
-			<view class="text-slate-200 text-center p-0-5 text-xs font-light" @tap="toggleMore" v-if="showMore">
-				<text v-if="more">更多 ↓</text>
-				<text v-else>收起 ↑ </text>
-			</view>
-		</view>
-		<view class="p-2 bg-white" :style="styles" :class="{more: showMore && more}">
-			<view class="demoContent">
-				<slot></slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-
-
-<style lang="scss" scoped>
-	.more {
+	// 废弃
+	import { ref, computed, getCurrentInstance, onMounted, nextTick } from 'vue'
+	const props = defineProps({
+		title: '',
+		maxHeight: {
+			default: 200
+		}
+	})
+	const instance = getCurrentInstance()
+	const demoContentRef = ref()
+	const more = ref(true)
+	const showMore = ref(false)
+	const styles = computed(() => {
+		return more.value ? {
+			maxHeight: `${props.maxHeight}rpx`,
+			overflow: 'hidden',
+		} : {}
+	})
+
+
+	onMounted(getDemoContentRef)
+	nextTick(getDemoContentRef)
+
+	function callback(data) {
+		const { height } = data
+		showMore.value = height > uni.upx2px(props.maxHeight)
+		more.value = height > uni.upx2px(props.maxHeight)
+	}
+
+	function getDemoContentRef() {
+		let query = uni.createSelectorQuery().in(instance)
+		query.select('.demoContent')
+			.fields({ rect: true, size: true, scrollOffset: true }, callback)
+			// .boundingClientRect(callback)
+			.exec()
+	}
+
+	function toggleMore() {
+		more.value = !more.value
+	}
+</script>
+
+<template>
+	<view>
+		<view class="p-2 bg-slate-500 sticky t-0 flex item-center">
+			<view class="flex-1 font-medium font-bold text-base text-slate-50">{{title}}</view>
+			<view class="text-slate-200 text-center p-0-5 text-xs font-light" @tap="toggleMore" v-if="showMore">
+				<text v-if="more">更多 ↓</text>
+				<text v-else>收起 ↑ </text>
+			</view>
+		</view>
+		<view class="p-2 bg-white" :style="styles" :class="{more: showMore && more}">
+			<view class="demoContent">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+
+
+<style lang="scss" scoped>
+	.more {
 		position: relative;
 		&::after {
 			content: '';
@@ -74,6 +74,6 @@
 			background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5));
 			// backdrop-filter: blur(4rpx) saturate(50%);
 			// box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, .25);
-		}
-	}
+		}
+	}
 </style>

uni_modules/jc-tailwind/components/JcDemo/JcDemo.vue

@@ -1,72 +1,72 @@
-<script setup>
-	import { computed, nextTick, ref } from "vue";
-	const props = defineProps({
-		title: '',
-		classes: {
-			default: []
-		},
+<script setup>
+	import { computed, nextTick, ref } from "vue";
+	const props = defineProps({
+		title: '',
+		classes: {
+			default: []
+		},
 		scss: '',
 		hasShowClass: {
 			default: true
-		}
+		}
 	})
 	
 	const showClasses = ref(false)
 	
 	function toggleShowClasses() {
 		showClasses.value = !showClasses.value
-	}
-
-	function copy({ name }) {
-		uni.setClipboardData({
-			data: name
-		})
-	}
-</script>
-
-<template>
-	<view>
-		<view class="p-2 sticky top-0 z-10 flex items-center bg-slate-100">
+	}
+
+	function copy({ name }) {
+		uni.setClipboardData({
+			data: name
+		})
+	}
+</script>
+
+<template>
+	<view>
+		<view class="p-2 sticky top-0 z-10 flex items-center bg-slate-100">
 			<view class="flex-1 font-medium font-bold font-sans text-2xl">{{title}}</view>
-			<view class="text-blue-500" @tap="toggleShowClasses" v-if="hasShowClass">查看</view>
-		</view>
-		<view class="p-2 bg-white" v-if="classes.length || $slots.default">
-			<view class="border-b-2 border-slate-100 mb-3-5 " v-if="classes.length && showClasses">
-				<view class="pb-2 flex items-center border-b-2 border-slate-100 text-slate-700 text-xs">
-					<view class="flex-1 font-medium mr-2">Class</view>
-					<view class="font-medium">Properties</view>
-				</view>
-				<view class="max-h-96 overflow-auto">
-					<view v-for="d, i in classes" :key="i" @tap="copy(d)">
-						<view class="p-2 border-slate-100 flex items-center font-mono text-xs whitespace-nowrap overflow-auto" :class="{'border-t': i > 0}">
-							<view class="flex-1 text-sky-500 mr-6 flex items-center">
+			<view class="text-blue-500" @tap="toggleShowClasses" v-if="hasShowClass">查看</view>
+		</view>
+		<view class="p-2 bg-white" v-if="classes.length || $slots.default">
+			<view class="border-b-2 border-slate-100 mb-3-5 " v-if="classes.length && showClasses">
+				<view class="pb-2 flex items-center border-b-2 border-slate-100 text-slate-700 text-xs">
+					<view class="flex-1 font-medium mr-2">Class</view>
+					<view class="font-medium">Properties</view>
+				</view>
+				<view class="max-h-96 overflow-auto">
+					<view v-for="d, i in classes" :key="i" @tap="copy(d)">
+						<view class="p-2 border-slate-100 flex items-center font-mono text-xs whitespace-nowrap overflow-auto" :class="{'border-t': i > 0}">
+							<view class="flex-1 text-sky-500 mr-6 flex items-center">
 								<text class="mr-2 w-4 h-4" :style="{backgroundColor: d.bgcolor}" v-if="d.bgcolor != undefined" @tap.stop="copy({name: d.bgcolor})"></text>
-								<text class="mr-2 font-medium text-base" :style="{color: d.textcolor}" v-if="d.textcolor != undefined" @tap.stop="copy({name: d.textcolor})">Aa</text>
-								{{d.name}}
-							</view>
-							<view class="text-indigo-500">
-								<view class="flex items-center" v-for="v, k in d.value" :key="k">
-									<text>{{v.value ? v.value : v}}</text>
-									<template v-if="v.value != undefined">
-										<text class="text-indigo-300 ml-2" v-if="v.rpx != undefined">/* {{v.rpx}}rpx */</text>
-										<text class="text-indigo-300 ml-2" v-if="v.percent != undefined">/* {{v.percent}} */</text>
-										<text class="text-indigo-300 ml-2" v-if="v.desc != undefined">/* {{v.desc}} */</text>
-									</template>
-									<template v-else>
-										<text class="text-indigo-300 ml-2" v-if="d.rpx != undefined">/* {{d.rpx}}rpx */</text>
-										<text class="text-indigo-300 ml-2" v-if="d.percent != undefined">/* {{d.percent}} */</text>
-										<text class="text-indigo-300 ml-2" v-if="d.desc != undefined">/* {{d.desc}} */</text>
-									</template>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
+								<text class="mr-2 font-medium text-base" :style="{color: d.textcolor}" v-if="d.textcolor != undefined" @tap.stop="copy({name: d.textcolor})">Aa</text>
+								{{d.name}}
+							</view>
+							<view class="text-indigo-500">
+								<view class="flex items-center" v-for="v, k in d.value" :key="k">
+									<text>{{v.value ? v.value : v}}</text>
+									<template v-if="v.value != undefined">
+										<text class="text-indigo-300 ml-2" v-if="v.rpx != undefined">/* {{v.rpx}}rpx */</text>
+										<text class="text-indigo-300 ml-2" v-if="v.percent != undefined">/* {{v.percent}} */</text>
+										<text class="text-indigo-300 ml-2" v-if="v.desc != undefined">/* {{v.desc}} */</text>
+									</template>
+									<template v-else>
+										<text class="text-indigo-300 ml-2" v-if="d.rpx != undefined">/* {{d.rpx}}rpx */</text>
+										<text class="text-indigo-300 ml-2" v-if="d.percent != undefined">/* {{d.percent}} */</text>
+										<text class="text-indigo-300 ml-2" v-if="d.desc != undefined">/* {{d.desc}} */</text>
+									</template>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
 			</view>
-			
-			<view :class="{'relative rounded-xl overflow-auto p-2 border border-slate-200 bg-slate-50 box-border': $slots.default}">
-				<slot></slot>
-			</view>
-		</view>
-	</view>
+			
+			<view :class="{'relative rounded-xl overflow-auto p-2 border border-slate-200 bg-slate-50 box-border': $slots.default}">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
 </template>

uni_modules/jc-tailwind/components/TwBackgrounds/TwBackgrounds.vue

@@ -1,15 +1,15 @@
-<script setup>
-	import useBackgrounds from '../../hooks/useBackgrounds.js'
-
-	const { BackgroundAttachment, BackgroundClip, BackgroundColor, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, BackgroundImage, GradientColorStops } = useBackgrounds()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="BackgroundAttachment"></JcDemo>
-		<JcDemo v-bind="BackgroundClip"></JcDemo>
-		<JcDemo v-bind="BackgroundColor">
-			<view class="gap-4 grid grid-cols-2">
+<script setup>
+	import useBackgrounds from '../../hooks/useBackgrounds.js'
+
+	const { BackgroundAttachment, BackgroundClip, BackgroundColor, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, BackgroundImage, GradientColorStops } = useBackgrounds()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BackgroundAttachment"></JcDemo>
+		<JcDemo v-bind="BackgroundClip"></JcDemo>
+		<JcDemo v-bind="BackgroundColor">
+			<view class="gap-4 grid grid-cols-2">
 				<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg bg-black">bg-black</view>
 				<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg bg-black__50"><text class="text-white">bg-black__50</text></view>
 				<view class="h-14 flex text-white shadow-lg rounded-lg bg-black">
@@ -22,52 +22,52 @@
 				<template v-for="d, i in ['slate','gray','zinc','neutral','stone','red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose']" :key="i">
 					<view class="h-14 text-white flex items-center justify-center shadow-lg rounded-lg" :class="`bg-${d}-500`">bg-{{d}}-500</view>
 				</template>
-				
+				
 				<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-stripes-indigo">bg-stripes-indigo</view>
 				<view class="h-14 flex items-center justify-center bg-indigo-500 bg-stripes-white rounded-lg text-white"></view>
 				
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="BackgroundOrigin"></JcDemo>
-		<JcDemo v-bind="BackgroundPosition"></JcDemo>
-		<JcDemo v-bind="BackgroundRepeat"></JcDemo>
-		<JcDemo v-bind="BackgroundSize"></JcDemo>
-		<JcDemo v-bind="BackgroundImage">
-			<view class="space-y-4">
-				<view class="h-14 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-r from-sky-500 to-indigo-500"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-r from-violet-500 to-fuchsia-500"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500"></view>
-			</view>
-
-			<view class="space-y-4 mt-4">
-				<view class="h-14 rounded-lg bg-gradient-to-t from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-tr from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-r from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-br from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-b from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-bl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-l from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-				<view class="h-14 rounded-lg bg-gradient-to-tl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="GradientColorStops">
-			<view class="space-y-4">
-				<view class="h-10 rounded-lg bg-gradient-to-r from-blue-500"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-2"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-3"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-4"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-5"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-6"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-7"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-8"></view>
-				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-9"></view>
-			</view>
-		</JcDemo>
-	</view>
-</template>
-
-
-
-<style>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="BackgroundOrigin"></JcDemo>
+		<JcDemo v-bind="BackgroundPosition"></JcDemo>
+		<JcDemo v-bind="BackgroundRepeat"></JcDemo>
+		<JcDemo v-bind="BackgroundSize"></JcDemo>
+		<JcDemo v-bind="BackgroundImage">
+			<view class="space-y-4">
+				<view class="h-14 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-sky-500 to-indigo-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-violet-500 to-fuchsia-500"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500"></view>
+			</view>
+
+			<view class="space-y-4 mt-4">
+				<view class="h-14 rounded-lg bg-gradient-to-t from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-tr from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-r from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-br from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-b from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-bl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-l from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+				<view class="h-14 rounded-lg bg-gradient-to-tl from-pink-500 to-blue-500 from-0-5 to-0-5"></view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="GradientColorStops">
+			<view class="space-y-4">
+				<view class="h-10 rounded-lg bg-gradient-to-r from-blue-500"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-2"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-3"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-4"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-5"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-6"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-7"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-8"></view>
+				<view class="h-10 rounded-lg bg-gradient-to-r from-red-500 to-blue-500 to-0-9"></view>
+			</view>
+		</JcDemo>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwBorders/TwBorders.vue

@@ -1,73 +1,73 @@
-<script setup>
-	import useBorders from '../../hooks/useBorders.js'
-	const { BorderRadius, BorderWidth, BorderColor, BorderStyle, DivideWidth, DivideColor, DivideStyle, OutlineWidth, OutlineColor, OutlineStyle, OutlineOffset, RingWidth, RingColor, RingOffsetWidth, RingOffsetColor } = useBorders()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="BorderRadius">
-			<view class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded</view>
-					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-md</view>
-					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-md"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-lg</view>
-					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-lg"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-full</view>
-					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-full"></view>
-				</view>
-			</view>
-		</JcDemo>
-
-		<JcDemo v-bind="BorderWidth">
-			<div class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
-				<div class="flex flex-col items-center shrink-0">
-					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border</p>
-					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border"></div>
-				</div>
-				<div class="flex flex-col items-center shrink-0">
-					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-2</p>
-					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-2"></div>
-				</div>
-				<div class="flex flex-col items-center shrink-0">
-					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-4</p>
-					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-4"></div>
-				</div>
-				<div class="flex flex-col items-center shrink-0">
-					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-8</p>
-					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-8"></div>
-				</div>
-			</div>
-		</JcDemo>
+<script setup>
+	import useBorders from '../../hooks/useBorders.js'
+	const { BorderRadius, BorderWidth, BorderColor, BorderStyle, DivideWidth, DivideColor, DivideStyle, OutlineWidth, OutlineColor, OutlineStyle, OutlineOffset, RingWidth, RingColor, RingOffsetWidth, RingOffsetColor } = useBorders()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BorderRadius">
+			<view class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-md</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-md"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-lg</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-lg"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">rounded-full</view>
+					<view class="p-4 shadow-sm bg-purple-500 w-16 h-16 rounded-full"></view>
+				</view>
+			</view>
+		</JcDemo>
+
+		<JcDemo v-bind="BorderWidth">
+			<div class="grid grid-cols-2 gap-4 text-white text-sm text-center font-bold leading-6">
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-2</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-2"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-4</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-4"></div>
+				</div>
+				<div class="flex flex-col items-center shrink-0">
+					<p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">border-8</p>
+					<div class="p-4 shadow-sm bg-white w-16 h-16 border-indigo-600 border-8"></div>
+				</div>
+			</div>
+		</JcDemo>
 		<JcDemo v-bind="BorderColor">
-			<view class="relative rounded-xl overflow-auto p-8">
-			<view class="max-w-xs mx-auto space-y-1">
-				<view class="text-slate-900 text-sm font-medium">Email address</view>
+			<view class="relative rounded-xl overflow-auto p-8">
+			<view class="max-w-xs mx-auto space-y-1">
+				<view class="text-slate-900 text-sm font-medium">Email address</view>
 				<view>
 					<input type="text" placeholder="jane@example.com" class="font-sans block text-sm leading-5 py-2 px-3 border-2 border-rose-600 text-slate-500 rounded-lg shadow-sm focus:outline-none focus:ring focus:ring-rose-200 focus:border-rose-500">
-				</view>
+				</view>
+			</view>
 			</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="BorderStyle"></JcDemo>
-
-		<!-- <JcDemo v-bind="DivideWidth"></JcDemo>
-		<JcDemo v-bind="DivideColor"></JcDemo>
-		<JcDemo v-bind="DivideStyle"></JcDemo>
-		<JcDemo v-bind="OutlineWidth"></JcDemo>
-		<JcDemo v-bind="OutlineColor"></JcDemo>
-		<JcDemo v-bind="OutlineStyle"></JcDemo>
-		<JcDemo v-bind="OutlineOffset"></JcDemo>
-		<JcDemo v-bind="RingWidth"></JcDemo>
-		<JcDemo v-bind="RingColor"></JcDemo>
-		<JcDemo v-bind="RingOffsetWidth"></JcDemo>
-		<JcDemo v-bind="RingOffsetColor"></JcDemo> -->
-	</view>
+		</JcDemo>
+		<JcDemo v-bind="BorderStyle"></JcDemo>
+
+		<!-- <JcDemo v-bind="DivideWidth"></JcDemo>
+		<JcDemo v-bind="DivideColor"></JcDemo>
+		<JcDemo v-bind="DivideStyle"></JcDemo>
+		<JcDemo v-bind="OutlineWidth"></JcDemo>
+		<JcDemo v-bind="OutlineColor"></JcDemo>
+		<JcDemo v-bind="OutlineStyle"></JcDemo>
+		<JcDemo v-bind="OutlineOffset"></JcDemo>
+		<JcDemo v-bind="RingWidth"></JcDemo>
+		<JcDemo v-bind="RingColor"></JcDemo>
+		<JcDemo v-bind="RingOffsetWidth"></JcDemo>
+		<JcDemo v-bind="RingOffsetColor"></JcDemo> -->
+	</view>
 </template>

uni_modules/jc-tailwind/components/TwEffects/TwEffects.vue

@@ -1,45 +1,45 @@
-<script setup>
-	import useEffects from '../../hooks/useEffects.js'
-	const { BoxShadow, BoxShadowColor, Opacity, MixBlendMode, BackgroundBlendMode } = useEffects()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="BoxShadow">
-			<view class="grid grid-cols-2 gap-12 font-mono font-bold shrink-0 p-8">
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-md</view>
-					<view class="w-24 h-24 rounded-lg bg-white shadow-md"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-lg</view>
-					<view class="w-24 h-24 rounded-lg bg-white shadow-lg"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-xl</view>
-					<view class="w-24 h-24 rounded-lg bg-white shadow-xl"></view>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-2xl</view>
-					<view class="w-24 h-24 rounded-lg bg-white shadow-2xl"></view>
-				</view>
-			</view>
-
-		</JcDemo>
-		<JcDemo v-bind="BoxShadowColor">
-			<view class="grid grid-cols-2 justify-center gap-2 p-4">
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-cyan-500</view>
-					<button class="py-2 px-3 bg-cyan-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-cyan-500 focus:outline-none">Subscribe</button>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-blue-500</view>
-					<button class="py-2 px-3 bg-blue-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-blue-500 focus:outline-none">Subscribe</button>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-indigo-500</view>
-					<button class="py-2 px-3 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500 focus:outline-none">Subscribe</button>
-				</view>
+<script setup>
+	import useEffects from '../../hooks/useEffects.js'
+	const { BoxShadow, BoxShadowColor, Opacity, MixBlendMode, BackgroundBlendMode } = useEffects()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="BoxShadow">
+			<view class="grid grid-cols-2 gap-12 font-mono font-bold shrink-0 p-8">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-md</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-md"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-lg</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-lg"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-xl</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-xl"></view>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-2xl</view>
+					<view class="w-24 h-24 rounded-lg bg-white shadow-2xl"></view>
+				</view>
+			</view>
+
+		</JcDemo>
+		<JcDemo v-bind="BoxShadowColor">
+			<view class="grid grid-cols-2 justify-center gap-2 p-4">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-cyan-500</view>
+					<button class="py-2 px-3 bg-cyan-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-cyan-500 focus:outline-none">Subscribe</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-blue-500</view>
+					<button class="py-2 px-3 bg-blue-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-blue-500 focus:outline-none">Subscribe</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3">shadow-indigo-500</view>
+					<button class="py-2 px-3 bg-indigo-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-indigo-500 focus:outline-none">Subscribe</button>
+				</view>
 			</view>
 			
 			<view class="grid grid-cols-2 justify-center gap-2 p-4 mt-2">
@@ -61,32 +61,32 @@
 						<button class="py-2 px-3 bg-indigo-500 text-white rounded-md text-sm font-semibold rounded-md ">Subscribe</button>
 					</view>
 				</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="Opacity">
-			<view class="grid grid-cols-2 items-center justify-center gap-8  text-white text-sm font-bold leading-6">
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-100</view>
-					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-100">Button A</button>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-75</view>
-					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-75">Button B</button>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-50</view>
-					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-50">Button C</button>
-				</view>
-				<view class="flex flex-col items-center shrink-0">
-					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-25</view>
-					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-25">Button D</button>
-				</view>
-			</view>
-		</JcDemo>
-		<!-- <JcDemo v-bind="MixBlendMode"></JcDemo> -->
-		<!-- <JcDemo v-bind="BackgroundBlendMode"></JcDemo> -->
-	</view>
-</template>
-
-<style>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="Opacity">
+			<view class="grid grid-cols-2 items-center justify-center gap-8  text-white text-sm font-bold leading-6">
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-100</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-100">Button A</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-75</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-75">Button B</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-50</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-50">Button C</button>
+				</view>
+				<view class="flex flex-col items-center shrink-0">
+					<view class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">opacity-25</view>
+					<button class="px-4 py-2 font-semibold text-sm bg-indigo-500 text-white rounded-md shadow-sm opacity-25">Button D</button>
+				</view>
+			</view>
+		</JcDemo>
+		<!-- <JcDemo v-bind="MixBlendMode"></JcDemo> -->
+		<!-- <JcDemo v-bind="BackgroundBlendMode"></JcDemo> -->
+	</view>
+</template>
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwFilters/TwFilters.vue

@@ -1,10 +1,10 @@
 <script setup>
 	import useFilters from '../../hooks/useFilters.js'
-	const { Blur, Brightness, Contrast, DropShadow, Grayscale, HueRotate, Invert, Saturate, Sepia, BackdropBlur, BackdropBrightness, BackdropContrast, BackdropGrayscale, BackdropHueRotate, BackdropInvert, BackdropOpacity, BackdropSaturate, BackdropSepia } = useFilters()
+	const { Blur, Brightness, Contrast, DropShadow, Grayscale, HueRotate, Invert, Saturate, Sepia, BackdropBlur, BackdropBrightness, BackdropContrast, BackdropGrayscale, BackdropHueRotate, BackdropInvert, BackdropOpacity, BackdropSaturate, BackdropSepia } = useFilters()
 </script>
 
-<template>
-	<view>
+<template>
+	<view>
 		<JcDemo v-bind="Blur"></JcDemo>
 		<!-- <JcDemo v-bind="Brightness"></JcDemo> -->
 		<!-- <JcDemo v-bind="Contrast"></JcDemo> -->
@@ -22,9 +22,9 @@
 		<!-- <JcDemo v-bind="BackdropInvert"></JcDemo> -->
 		<JcDemo v-bind="BackdropOpacity"></JcDemo>
 		<!-- <JcDemo v-bind="BackdropSaturate"></JcDemo> -->
-		<!-- <JcDemo v-bind="BackdropSepia"></JcDemo> -->
-	</view>
-</template>
-
-<style>
+		<!-- <JcDemo v-bind="BackdropSepia"></JcDemo> -->
+	</view>
+</template>
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwFlexboxGrid/TwFlexboxGrid.vue

@@ -29,10 +29,10 @@
 		PlaceContent,
 		PlaceItems,
 		PlaceSelf
-	} = useFlexboxGrid()
+	} = useFlexboxGrid()
 </script>
 
-<template>
+<template>
 	<view>
 		<JcDemo v-bind="FlexBasis"></JcDemo>
 		<JcDemo v-bind="FlexDirection"></JcDemo>
@@ -58,10 +58,10 @@
 		<JcDemo v-bind="PlaceContent" />
 		<JcDemo v-bind="PlaceItems" />
 		<JcDemo v-bind="PlaceSelf" />
-	</view>
-</template>
-
-
-
-<style>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwInteractivity/TwInteractivity.vue

@@ -1,10 +1,10 @@
 <script setup>
 	import useInteractivity from '../../hooks/useInteractivity.js'
-	const { AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, xxx, UserSelect, WillChange } = useInteractivity()
+	const { AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, xxx, UserSelect, WillChange } = useInteractivity()
 </script>
 
-<template>
-	<view>
+<template>
+	<view>
 		<!-- <JcDemo v-bind="AccentColor"></JcDemo> -->
 		<JcDemo v-bind="Appearance"></JcDemo>
 		<!-- <JcDemo v-bind="Cursor"></JcDemo> -->
@@ -19,11 +19,11 @@
 		<JcDemo v-bind="ScrollSnapType"></JcDemo>
 		<JcDemo v-bind="TouchAction"></JcDemo> -->
 		<JcDemo v-bind="UserSelect"></JcDemo>
-		<JcDemo v-bind="WillChange"></JcDemo>
-	</view>
-</template>
-
-
-
-<style>
+		<JcDemo v-bind="WillChange"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwLayout/TwLayout.vue

@@ -1,37 +1,37 @@
-<script setup>
-	import useLayout from '../../hooks/useLayout.js'
-
-	const { AspectRatio1, AspectRatio, BoxSizing, Display, Floats, Clear, Isolation, ObjectFit, ObjectPosition, Overflow, OverscrollBehavior, Position, TopRightBottomLeft, Visibility, ZIndex } = useLayout()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="AspectRatio"></JcDemo>
-
-		<!-- <JcDemo title="Container"></JcDemo>
-		<JcDemo title="Columns"></JcDemo>
-		<JcDemo title="Break After"></JcDemo>
-		<JcDemo title="Break Before"></JcDemo>
-		<JcDemo title="Break Inside"></JcDemo>
-		<JcDemo title="Box Decoration Break"></JcDemo> -->
-
-		<JcDemo v-bind="BoxSizing"></JcDemo>
-		<JcDemo v-bind="Display" :col="3"></JcDemo>
-		<JcDemo v-bind="Floats"></JcDemo>
-		<JcDemo v-bind="Clear"></JcDemo>
-		<JcDemo v-bind="Isolation"></JcDemo>
-		<JcDemo v-bind="ObjectFit"></JcDemo>
-		<JcDemo v-bind="ObjectPosition"></JcDemo>
-		<JcDemo v-bind="Overflow"></JcDemo>
-		<JcDemo v-bind="OverscrollBehavior"></JcDemo>
-		<JcDemo v-bind="Position"></JcDemo>
-		<JcDemo v-bind="TopRightBottomLeft"></JcDemo>
-		<JcDemo v-bind="Visibility"></JcDemo>
-		<JcDemo v-bind="ZIndex"></JcDemo>
-	</view>
-</template>
-
-
-
-<style>
+<script setup>
+	import useLayout from '../../hooks/useLayout.js'
+
+	const { AspectRatio1, AspectRatio, BoxSizing, Display, Floats, Clear, Isolation, ObjectFit, ObjectPosition, Overflow, OverscrollBehavior, Position, TopRightBottomLeft, Visibility, ZIndex } = useLayout()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="AspectRatio"></JcDemo>
+
+		<!-- <JcDemo title="Container"></JcDemo>
+		<JcDemo title="Columns"></JcDemo>
+		<JcDemo title="Break After"></JcDemo>
+		<JcDemo title="Break Before"></JcDemo>
+		<JcDemo title="Break Inside"></JcDemo>
+		<JcDemo title="Box Decoration Break"></JcDemo> -->
+
+		<JcDemo v-bind="BoxSizing"></JcDemo>
+		<JcDemo v-bind="Display" :col="3"></JcDemo>
+		<JcDemo v-bind="Floats"></JcDemo>
+		<JcDemo v-bind="Clear"></JcDemo>
+		<JcDemo v-bind="Isolation"></JcDemo>
+		<JcDemo v-bind="ObjectFit"></JcDemo>
+		<JcDemo v-bind="ObjectPosition"></JcDemo>
+		<JcDemo v-bind="Overflow"></JcDemo>
+		<JcDemo v-bind="OverscrollBehavior"></JcDemo>
+		<JcDemo v-bind="Position"></JcDemo>
+		<JcDemo v-bind="TopRightBottomLeft"></JcDemo>
+		<JcDemo v-bind="Visibility"></JcDemo>
+		<JcDemo v-bind="ZIndex"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwReadme/TwReadme.vue

@@ -1,15 +1,15 @@
-<script setup>
-	import useVars from '../../hooks/useVars.js'
-	import useColor from '../../hooks/useColor.js'
-
-	const { pxs, percents, border_radius, xls, opacitys } = useVars()
-	const { colors, color } = useColor()
-
-	function copy(data) {
-		uni.setClipboardData({ data: `${data}` })
-	}
-</script>
-
+<script setup>
+	import useVars from '../../hooks/useVars.js'
+	import useColor from '../../hooks/useColor.js'
+
+	const { pxs, percents, border_radius, xls, opacitys } = useVars()
+	const { colors, color } = useColor()
+
+	function copy(data) {
+		uni.setClipboardData({ data: `${data}` })
+	}
+</script>
+
 <template>
 	<JcDemo :hasShowClass="false" title="透明度">
 		<template v-for="d, i in opacitys" :key="i">
@@ -19,14 +19,14 @@
 			</view>
 		</template>
 	</JcDemo>
-	
-	<JcDemo :hasShowClass="false" title="尺寸">
+	
+	<JcDemo :hasShowClass="false" title="尺寸">
 		<template v-for="d, i in pxs" :key="i">
 			<view class="px-2 py-1 border-b border-slate-100" @tap="copy(d.rpx)">
 				{{d.value}}  
 				<text class="text-slate-300 text-xs font-mono ml-2">// {{d.rpx}}rpx</text>
 			</view>
-		</template>
+		</template>
 	</JcDemo>
 	
 	<JcDemo :hasShowClass="false" title="百分比">
@@ -66,8 +66,8 @@
 		</template>
 	</JcDemo>
 	
-	
-</template>
-
-<style>
+	
+</template>
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwSizing/TwSizing.vue

@@ -1,102 +1,102 @@
-<script setup>
-	import useSizing from '../../hooks/useSizing.js'
-
-	const { Width, Height, MaxHeight } = useSizing()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="Width">
-			<view class="relative rounded-xl overflow-auto">
-				<view class="flex justify-center">
-					<view class="space-y-2 font-mono font-bold text-xs text-center text-white">
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-80 hidden sm:block">w-80</view>
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-64 hidden sm:block">w-64</view>
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-48">w-48</view>
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-40">w-40</view>
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-32">w-32</view>
-						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-24">w-24</view>
-					</view>
-				</view>
-			</view>
-
-
-			<view class="relative rounded-xl overflow-auto mt-2">
-				<view class="space-y-2 font-mono font-bold text-xs text-white">
-					<view class="flex space-x-2">
-						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
-						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
-					</view>
-					<view class="flex space-x-2">
-						<view class="w-2_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_5</view>
-						<view class="w-3_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_5</view>
-					</view>
-					<view class="flex space-x-2">
-						<view class="w-1_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_3</view>
-						<view class="w-2_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_3</view>
-					</view>
-					<view class="space-x-2 hidden sm:flex">
-						<view class="w-1_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_4</view>
-						<view class="w-3_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_4</view>
-					</view>
-					<view class="space-x-2 hidden sm:flex">
-						<view class="w-1_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_5</view>
-						<view class="w-4_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4_5</view>
-					</view>
-					<view class="space-x-2 hidden sm:flex">
-						<view class="w-1_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_6</view>
-						<view class="w-5_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5_6</view>
-					</view>
-					<view class="w-full py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full</view>
-				</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="Height">
-			<view class="flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white">
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-96 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-96</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-80 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-80</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-64 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-64</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-48 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-48</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-40 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-40</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-32 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-32</view>
-					</view>
-				</view>
-				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-24 relative">
-					<view class="absolute w-8 bottom-6">
-						<view class="-rotate-90">h-24</view>
-					</view>
-				</view>
-			</view>
+<script setup>
+	import useSizing from '../../hooks/useSizing.js'
+
+	const { Width, Height, MaxHeight } = useSizing()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="Width">
+			<view class="relative rounded-xl overflow-auto">
+				<view class="flex justify-center">
+					<view class="space-y-2 font-mono font-bold text-xs text-center text-white">
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-80 hidden sm:block">w-80</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-64 hidden sm:block">w-64</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-48">w-48</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-40">w-40</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-32">w-32</view>
+						<view class="px-2 py-2 bg-blue-500 rounded-lg shadow-lg w-24">w-24</view>
+					</view>
+				</view>
+			</view>
+
+
+			<view class="relative rounded-xl overflow-auto mt-2">
+				<view class="space-y-2 font-mono font-bold text-xs text-white">
+					<view class="flex space-x-2">
+						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
+						<view class="w-1_2 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_2</view>
+					</view>
+					<view class="flex space-x-2">
+						<view class="w-2_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_5</view>
+						<view class="w-3_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_5</view>
+					</view>
+					<view class="flex space-x-2">
+						<view class="w-1_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_3</view>
+						<view class="w-2_3 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2_3</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_4</view>
+						<view class="w-3_4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3_4</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_5</view>
+						<view class="w-4_5 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4_5</view>
+					</view>
+					<view class="space-x-2 hidden sm:flex">
+						<view class="w-1_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1_6</view>
+						<view class="w-5_6 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5_6</view>
+					</view>
+					<view class="w-full py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full</view>
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="Height">
+			<view class="flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white">
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-96 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-96</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-80 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-80</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-64 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-64</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-48 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-48</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-40 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-40</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-32 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-32</view>
+					</view>
+				</view>
+				<view class="w-8 bg-blue-500 rounded-lg shadow-lg h-24 relative">
+					<view class="absolute w-8 bottom-6">
+						<view class="-rotate-90">h-24</view>
+					</view>
+				</view>
+			</view>
 		</JcDemo>
 		
-		<JcDemo v-bind="MaxHeight"></JcDemo>
-
-	</view>
-</template>
-
-
-
-<style>
+		<JcDemo v-bind="MaxHeight"></JcDemo>
+
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwSpacing/TwSpacing.vue

@@ -1,87 +1,87 @@
-<script setup>
-	import useSpacing from '../../hooks/useSpacing.js'
-
-	const { Padding, Margin, SpaceBetween } = useSpacing()
-</script>
-
-<template>
-	<view>
+<script setup>
+	import useSpacing from '../../hooks/useSpacing.js'
+
+	const { Padding, Margin, SpaceBetween } = useSpacing()
+</script>
+
+<template>
+	<view>
 		<JcDemo v-bind="Padding">
-			<view class="grid grid-cols-4 gap-2 text-white font-mono text-center">
-				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
-					<view class="h-6 bg-stripes-white rounded-t-lg"></view>
-					<view class="p-4">pt-6</view>
-				</view>
-
-				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
-					<view class="flex-1 flex items-center justify-center">pr-4</view>
-					<view class="w-4 bg-stripes-white rounded-r"></view>
-				</view>
-
-				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
-					<view class="p-4">pb-8</view>
-					<view class="h-8 bg-stripes-white rounded-b-lg"></view>
-				</view>
-
-				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
-					<view class="w-2 bg-stripes-white rounded-l"></view>
-					<view class="flex-1 flex items-center justify-center">pl-2</view>
-				</view>
-			</view>
-
-			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
-				<view class="flex bg-indigo-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
-					<view class="w-8 bg-stripes-white"></view>
-					<view class="flex-1 p-4 text-center">px-8</view>
-					<view class="w-8 bg-stripes-white"></view>
-				</view>
-			</view>
-
-			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
-				<view class="bg-pink-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
-					<view class="h-8 bg-stripes-white"></view>
-					<view class="p-4 text-center">py-8</view>
-					<view class="h-8 bg-stripes-white"></view>
-				</view>
-			</view>
-		</JcDemo>
-
-		<JcDemo v-bind="Margin"></JcDemo>
-
-		<JcDemo v-bind="SpaceBetween">
-			<view class="flex space-x-4  bg-stripes-indigo rounded-lg text-white bg-slate-200">
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
-			</view>
-			<view class="flex flex-row-reverse space-x-4 space-x-reverse bg-stripes-cyan rounded-lg text-white bg-slate-300 mt-2">
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
-				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
-			</view>
-
-			<view class="grid grid-cols-2 gap-2 mt-2">
-				<view class="bg-slate-200">
-					<view class="flex flex-col space-y-4 bg-stripes-indigo rounded-lg text-white">
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
-					</view>
-				</view>
-				<view class="bg-slate-300">
-					<view class="flex flex-col flex-col-reverse space-y-4 space-y-reverse bg-stripes-cyan rounded-lg text-white">
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
-						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
-					</view>
-				</view>
-			</view>
-		</JcDemo>
-
-	</view>
-</template>
-
-
-
-<style>
+			<view class="grid grid-cols-4 gap-2 text-white font-mono text-center">
+				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="h-6 bg-stripes-white rounded-t-lg"></view>
+					<view class="p-4">pt-6</view>
+				</view>
+
+				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="flex-1 flex items-center justify-center">pr-4</view>
+					<view class="w-4 bg-stripes-white rounded-r"></view>
+				</view>
+
+				<view class="bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="p-4">pb-8</view>
+					<view class="h-8 bg-stripes-white rounded-b-lg"></view>
+				</view>
+
+				<view class="flex bg-purple-500 shadow-lg rounded-lg overflow-hidden">
+					<view class="w-2 bg-stripes-white rounded-l"></view>
+					<view class="flex-1 flex items-center justify-center">pl-2</view>
+				</view>
+			</view>
+
+			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
+				<view class="flex bg-indigo-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
+					<view class="w-8 bg-stripes-white"></view>
+					<view class="flex-1 p-4 text-center">px-8</view>
+					<view class="w-8 bg-stripes-white"></view>
+				</view>
+			</view>
+
+			<view class="flex justify-center font-mono text-white text-sm font-bold leading-6">
+				<view class="bg-pink-500 shadow-lg rounded-lg overflow-hidden text-white mt-2 font-mono">
+					<view class="h-8 bg-stripes-white"></view>
+					<view class="p-4 text-center">py-8</view>
+					<view class="h-8 bg-stripes-white"></view>
+				</view>
+			</view>
+		</JcDemo>
+
+		<JcDemo v-bind="Margin"></JcDemo>
+
+		<JcDemo v-bind="SpaceBetween">
+			<view class="flex space-x-4  bg-stripes-indigo rounded-lg text-white bg-slate-200">
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
+			</view>
+			<view class="flex flex-row-reverse space-x-4 space-x-reverse bg-stripes-cyan rounded-lg text-white bg-slate-300 mt-2">
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
+				<view class="w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
+			</view>
+
+			<view class="grid grid-cols-2 gap-2 mt-2">
+				<view class="bg-slate-200">
+					<view class="flex flex-col space-y-4 bg-stripes-indigo rounded-lg text-white">
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">01</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">02</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500">03</view>
+					</view>
+				</view>
+				<view class="bg-slate-300">
+					<view class="flex flex-col flex-col-reverse space-y-4 space-y-reverse bg-stripes-cyan rounded-lg text-white">
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">01</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">02</view>
+						<view class="h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500">03</view>
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwTransforms/TwTransforms.vue

@@ -1,20 +1,20 @@
 <script setup>
 	import useTransforms from '../../hooks/useTransforms.js'
 	
-	const { Scale, Rotate, Translate, Skew, TransformOrigin } = useTransforms()
+	const { Scale, Rotate, Translate, Skew, TransformOrigin } = useTransforms()
 </script>
 
-<template>
+<template>
 	<view>
 		<JcDemo v-bind="Scale"></JcDemo>
 		<JcDemo v-bind="Rotate"></JcDemo>
 		<JcDemo v-bind="Translate"></JcDemo>
 		<JcDemo v-bind="Skew"></JcDemo>
-		<JcDemo v-bind="TransformOrigin"></JcDemo>
-	</view>
-</template>
-
-
-
-<style>
+		<JcDemo v-bind="TransformOrigin"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwTransitionsAnimation/TwTransitionsAnimation.vue

@@ -1,58 +1,58 @@
-<script setup>
-	import useTransitionsAnimation from '../../hooks/useTransitionsAnimation.js'
-	const { TransitionProperty, TransitionDuration, TransitionTimingFunction, TransitionDelay, Animation } = useTransitionsAnimation()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="TransitionProperty"></JcDemo>
-		<JcDemo v-bind="TransitionDuration"></JcDemo>
-		<JcDemo v-bind="TransitionTimingFunction"></JcDemo>
-		<JcDemo v-bind="TransitionDelay"></JcDemo>
-		<JcDemo v-bind="Animation">
-			<view class="text-lg p-2">Spin</view>
-			<view class="flex items-center justify-center">
-				<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 transition ease-in-out duration-150 cursor-not-allowed" disabled="">
-					<text class="animate-spin -ml-1 mr-3 h-5 w-5 text-white border-2 border-indigo-50 border-t-transparent rounded-full"></text>
-					Processing...
-				</button>
-			</view>
-
-			<view class="text-lg p-2">Ping</view>
-			<view class="flex items-center justify-center">
-				<view class="relative inline-flex">
-					<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-sky-500 bg-white  transition ease-in-out duration-150 cursor-not-allowed ring-1 ring-slate-900 " disabled="">
-						Transactions
-					</button>
-					<view class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
-						<text class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></text>
-						<text class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></text>
-					</view>
-				</view>
-			</view>
-
-			<view class="text-lg p-2">Pulse</view>
-			<view class="bg-white  p-4  rounded-lg shadow-lg max-w-xs w-full h-28">
-				<view class="flex space-x-4 animate-pulse">
-					<view class="rounded-full bg-slate-200 h-10 w-10"></view>
-					<view class="flex-1 space-y-6 py-1">
-						<view class="h-2 bg-slate-200 rounded"></view>
-						<view class="space-y-3">
-							<view class="grid grid-cols-3 gap-4">
-								<view class="h-2 bg-slate-200 rounded col-span-2"></view>
-								<view class="h-2 bg-slate-200 rounded col-span-1"></view>
-							</view>
-							<view class="h-2 bg-slate-200 rounded"></view>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<view class="text-lg p-2">Bounce</view>
-			<view class="animate-bounce bg-white  p-2 w-10 h-10 ring-1 ring-slate-900  shadow-lg rounded-full flex items-center justify-center"></view>
-		</JcDemo>
-	</view>
-</template>
-
-<style>
+<script setup>
+	import useTransitionsAnimation from '../../hooks/useTransitionsAnimation.js'
+	const { TransitionProperty, TransitionDuration, TransitionTimingFunction, TransitionDelay, Animation } = useTransitionsAnimation()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="TransitionProperty"></JcDemo>
+		<JcDemo v-bind="TransitionDuration"></JcDemo>
+		<JcDemo v-bind="TransitionTimingFunction"></JcDemo>
+		<JcDemo v-bind="TransitionDelay"></JcDemo>
+		<JcDemo v-bind="Animation">
+			<view class="text-lg p-2">Spin</view>
+			<view class="flex items-center justify-center">
+				<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 transition ease-in-out duration-150 cursor-not-allowed" disabled="">
+					<text class="animate-spin -ml-1 mr-3 h-5 w-5 text-white border-2 border-indigo-50 border-t-transparent rounded-full"></text>
+					Processing...
+				</button>
+			</view>
+
+			<view class="text-lg p-2">Ping</view>
+			<view class="flex items-center justify-center">
+				<view class="relative inline-flex">
+					<button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-sky-500 bg-white  transition ease-in-out duration-150 cursor-not-allowed ring-1 ring-slate-900 " disabled="">
+						Transactions
+					</button>
+					<view class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
+						<text class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></text>
+						<text class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></text>
+					</view>
+				</view>
+			</view>
+
+			<view class="text-lg p-2">Pulse</view>
+			<view class="bg-white  p-4  rounded-lg shadow-lg max-w-xs w-full h-28">
+				<view class="flex space-x-4 animate-pulse">
+					<view class="rounded-full bg-slate-200 h-10 w-10"></view>
+					<view class="flex-1 space-y-6 py-1">
+						<view class="h-2 bg-slate-200 rounded"></view>
+						<view class="space-y-3">
+							<view class="grid grid-cols-3 gap-4">
+								<view class="h-2 bg-slate-200 rounded col-span-2"></view>
+								<view class="h-2 bg-slate-200 rounded col-span-1"></view>
+							</view>
+							<view class="h-2 bg-slate-200 rounded"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="text-lg p-2">Bounce</view>
+			<view class="animate-bounce bg-white  p-2 w-10 h-10 ring-1 ring-slate-900  shadow-lg rounded-full flex items-center justify-center"></view>
+		</JcDemo>
+	</view>
+</template>
+
+<style>
 </style>

uni_modules/jc-tailwind/components/TwTypography/TwTypography.vue

@@ -1,129 +1,129 @@
-<script setup>
-	import useTypography from '../../hooks/useTypography.js'
-	const {
-		FontFamily,
-		FontSize,
-		FontSmoothing,
-		FontStyle,
-		FontWeight,
-		FontVariantNumeric,
-		LetterSpacing,
-		LineClamp,
-		LineHeight,
-		ListStyleImage,
-		ListStylePosition,
-		ListStyleType,
-		TextAlign,
-		TextColor,
-		TextDecoration,
-		TextDecorationColor,
-		TextDecorationStyle,
-		TextDecorationThickness,
-		TextUnderlineOffset,
-		TextTransform,
-		TextOverflow,
-		TextIndent,
-		VerticalAlign,
-		Whitespace,
-		WordBreak,
-		Hyphens,
-		Content
-	} = useTypography()
-</script>
-
-<template>
-	<view>
-		<JcDemo v-bind="FontFamily"></JcDemo>
-		<JcDemo v-bind="FontSize">
-			<view class="flex flex-col gap-8">
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-sm</text>
-					<view class="text-sm font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-base</text>
-					<view class="text-base font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-lg</text>
-					<view class="text-lg font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-xl</text>
-					<view class="text-xl font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-2xl</text>
-					<view class="text-2xl font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-			</view>
-		</JcDemo>
-		<!-- <JcDemo v-bind="FontSmoothing"></JcDemo> -->
-		<JcDemo v-bind="FontStyle"></JcDemo>
-		<JcDemo v-bind="FontWeight"></JcDemo>
-		<JcDemo v-bind="FontVariantNumeric"></JcDemo>
-		<JcDemo v-bind="LetterSpacing">
-			<view class="flex flex-col gap-8">
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-tight</text>
-					<view class="tracking-tight text-lg font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-normal</text>
-					<view class="tracking-normal text-lg font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-				<view>
-					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-wide</text>
-					<view class="tracking-wide text-lg font-medium text-slate-900 dark:text-slate-200">
-						The quick brown fox jumps over the lazy dog.
-					</view>
-				</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="LineClamp">
-			<view class="mx-auto max-w-sm bg-white p-8 text-sm leading-6 text-slate-700 shadow-xl ">
-				<view datetime="2020-03-16" class="block text-sm leading-6 text-slate-500 ">Mar 10, 2020</view>
-				<view class="mt-2 text-lg font-semibold text-slate-900 ">Boost your conversion rate</view>
-				<view class="line-clamp-3 mt-4 text-sm leading-6 text-slate-500 ">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</view>
-				<view class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-slate-900 ">
-					<img class="h-6 w-6 flex-none rounded-full bg-slate-50 " src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
-					Lindsay Walton
-				</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="LineHeight"></JcDemo>
-		<!-- <JcDemo v-bind="ListStyleImage"></JcDemo> -->
-		<!-- <JcDemo v-bind="ListStylePosition"></JcDemo> -->
-		<!-- <JcDemo v-bind="ListStyleType"></JcDemo> -->
-		<JcDemo v-bind="TextAlign">
+<script setup>
+	import useTypography from '../../hooks/useTypography.js'
+	const {
+		FontFamily,
+		FontSize,
+		FontSmoothing,
+		FontStyle,
+		FontWeight,
+		FontVariantNumeric,
+		LetterSpacing,
+		LineClamp,
+		LineHeight,
+		ListStyleImage,
+		ListStylePosition,
+		ListStyleType,
+		TextAlign,
+		TextColor,
+		TextDecoration,
+		TextDecorationColor,
+		TextDecorationStyle,
+		TextDecorationThickness,
+		TextUnderlineOffset,
+		TextTransform,
+		TextOverflow,
+		TextIndent,
+		VerticalAlign,
+		Whitespace,
+		WordBreak,
+		Hyphens,
+		Content
+	} = useTypography()
+</script>
+
+<template>
+	<view>
+		<JcDemo v-bind="FontFamily"></JcDemo>
+		<JcDemo v-bind="FontSize">
+			<view class="flex flex-col gap-8">
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-sm</text>
+					<view class="text-sm font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-base</text>
+					<view class="text-base font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-lg</text>
+					<view class="text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-xl</text>
+					<view class="text-xl font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">text-2xl</text>
+					<view class="text-2xl font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		<!-- <JcDemo v-bind="FontSmoothing"></JcDemo> -->
+		<JcDemo v-bind="FontStyle"></JcDemo>
+		<JcDemo v-bind="FontWeight"></JcDemo>
+		<JcDemo v-bind="FontVariantNumeric"></JcDemo>
+		<JcDemo v-bind="LetterSpacing">
+			<view class="flex flex-col gap-8">
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-tight</text>
+					<view class="tracking-tight text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-normal</text>
+					<view class="tracking-normal text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+				<view>
+					<text class="font-medium text-sm text-slate-500 font-mono mb-3 dark:text-slate-400">tracking-wide</text>
+					<view class="tracking-wide text-lg font-medium text-slate-900 dark:text-slate-200">
+						The quick brown fox jumps over the lazy dog.
+					</view>
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="LineClamp">
+			<view class="mx-auto max-w-sm bg-white p-8 text-sm leading-6 text-slate-700 shadow-xl ">
+				<view datetime="2020-03-16" class="block text-sm leading-6 text-slate-500 ">Mar 10, 2020</view>
+				<view class="mt-2 text-lg font-semibold text-slate-900 ">Boost your conversion rate</view>
+				<view class="line-clamp-3 mt-4 text-sm leading-6 text-slate-500 ">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</view>
+				<view class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-slate-900 ">
+					<img class="h-6 w-6 flex-none rounded-full bg-slate-50 " src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+					Lindsay Walton
+				</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="LineHeight"></JcDemo>
+		<!-- <JcDemo v-bind="ListStyleImage"></JcDemo> -->
+		<!-- <JcDemo v-bind="ListStylePosition"></JcDemo> -->
+		<!-- <JcDemo v-bind="ListStyleType"></JcDemo> -->
+		<JcDemo v-bind="TextAlign">
 			<view class="space-y-2">
 				<view class="text-left">text-left</view>
 				<view class="text-center">text-center</view>
 				<view class="text-right">text-right</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="TextColor">
-			<view class="text-xl font-medium leading-6 space-y-2">
-				<view class="text-blue-600">The quick brown fox jumps over the lazy dog.</view>
-				<view class="text-blue-500">The quick brown fox jumps over the lazy dog.</view>
-				<view class="text-blue-400">The quick brown fox jumps over the lazy dog.</view>
-				<view class="text-blue-300">The quick brown fox jumps over the lazy dog.</view>
-				<view class="text-blue-200">The quick brown fox jumps over the lazy dog.</view>
-				<view class="text-blue-100">The quick brown fox jumps over the lazy dog.</view>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextColor">
+			<view class="text-xl font-medium leading-6 space-y-2">
+				<view class="text-blue-600">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-500">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-400">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-300">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-200">The quick brown fox jumps over the lazy dog.</view>
+				<view class="text-blue-100">The quick brown fox jumps over the lazy dog.</view>
 			</view>
 			<view class="p-2 my-2 bg-black__5">透明度[只支持white,black]</view>
 			<view class="text-xl font-medium leading-6 space-y-2">
@@ -131,29 +131,29 @@
 				<view class="text-black__75">The quick brown fox jumps over the lazy dog.</view>
 				<view class="text-black__50">The quick brown fox jumps over the lazy dog.</view>
 				<view class="text-black__5">The quick brown fox jumps over the lazy dog.</view>
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="TextDecoration"></JcDemo>
-		<JcDemo v-bind="TextDecorationColor"></JcDemo>
-		<JcDemo v-bind="TextDecorationStyle"></JcDemo>
-		<JcDemo v-bind="TextDecorationThickness"></JcDemo>
-		<JcDemo v-bind="TextUnderlineOffset"></JcDemo>
-		<JcDemo v-bind="TextTransform"></JcDemo>
-		<JcDemo v-bind="TextOverflow">
-			<view class="truncate">
-				The longest word in any of the major English language dictionaries is <text class="text-slate-900 font-medium">pneumonoultramicroscopicsilicovolcanoconiosis,</text> a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
-			</view>
-		</JcDemo>
-		<JcDemo v-bind="TextIndent"></JcDemo>
-		<JcDemo v-bind="VerticalAlign"></JcDemo>
-		<JcDemo v-bind="Whitespace"></JcDemo>
-		<JcDemo v-bind="WordBreak"></JcDemo>
-		<JcDemo v-bind="Hyphens"></JcDemo>
-		<JcDemo v-bind="Content"></JcDemo>
-	</view>
-</template>
-
-
-
-<style>
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextDecoration"></JcDemo>
+		<JcDemo v-bind="TextDecorationColor"></JcDemo>
+		<JcDemo v-bind="TextDecorationStyle"></JcDemo>
+		<JcDemo v-bind="TextDecorationThickness"></JcDemo>
+		<JcDemo v-bind="TextUnderlineOffset"></JcDemo>
+		<JcDemo v-bind="TextTransform"></JcDemo>
+		<JcDemo v-bind="TextOverflow">
+			<view class="truncate">
+				The longest word in any of the major English language dictionaries is <text class="text-slate-900 font-medium">pneumonoultramicroscopicsilicovolcanoconiosis,</text> a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
+			</view>
+		</JcDemo>
+		<JcDemo v-bind="TextIndent"></JcDemo>
+		<JcDemo v-bind="VerticalAlign"></JcDemo>
+		<JcDemo v-bind="Whitespace"></JcDemo>
+		<JcDemo v-bind="WordBreak"></JcDemo>
+		<JcDemo v-bind="Hyphens"></JcDemo>
+		<JcDemo v-bind="Content"></JcDemo>
+	</view>
+</template>
+
+
+
+<style>
 </style>

uni_modules/jc-tailwind/hooks/useBackgrounds.js

@@ -1,84 +1,84 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-import useColor from './useColor.js'
-
-function useHook() { // 
-	const { colors, color } = useColor()
-	const { pxs, percents } = useVars()
-
-
-
-	const BackgroundAttachment = { title: 'Background Attachment', classes: getClasses(`fixed, local, scroll`, { name: 'bg-', value: 'background-attachment', scss: 0 }) }
-	const BackgroundClip = {
-		title: 'Background Clip',
-		classes: getClasses([
-			{ name: 'border', value: 'border-box' },
-			{ name: 'padding', value: 'padding-box' },
-			{ name: 'content', value: 'content-box' },
-			{ name: 'text', value: 'text' },
-		], { name: 'bg-clip-', value: 'background-clip', scss: 0 })
-	}
-
-	const BackgroundColor = {
-		title: 'Background Color',
-		classes: color.map(c => {
-			return {
-				...c,
-				name: `bg-${c.name}`,
-				value: [`background: ${c.value};`],
-				bgcolor: c.color,
-				desc: c.rgb,
-			}
-		})
-	}
-
-	const BackgroundOrigin = {
-		title: 'Background Origin',
-		classes: getClasses([{ name: 'border', value: 'border-box' },
-			{ name: 'padding', value: 'padding-box' },
-			{ name: 'content', value: 'content-box' },
-		], { name: 'bg-origin-', value: 'background-origin', scss: 0 })
-	}
-	const BackgroundPosition = {
-		title: 'Background Position',
-		classes: getClasses([
-			{ name: 'bottom', value: 'bottom' },
-			{ name: 'center', value: 'center' },
-			{ name: 'left', value: 'left' },
-			{ name: 'left-bottom', value: 'left bottom' },
-			{ name: 'left-top', value: 'left top' },
-			{ name: 'right', value: 'right' },
-			{ name: 'right-bottom', value: 'right bottom' },
-			{ name: 'right-top', value: 'right top' },
-			{ name: 'top', value: 'top' },
-		], { name: 'bg-', value: 'background-position', scss: 0 })
-	}
-	const BackgroundRepeat = {
-		title: 'Background Repeat',
-		classes: getClasses([
-			{ name: 'repeat', value: 'repeat' },
-			{ name: 'no-repeat', value: 'no-repeat' },
-			{ name: 'repeat-x', value: 'repeat-x' },
-			{ name: 'repeat-y', value: 'repeat-y' },
-			{ name: 'repeat-round', value: 'round' },
-			{ name: 'repeat-space', value: 'space' },
-		], { name: 'bg-', value: 'background-repeat', scss: 0 })
-	}
-	const BackgroundSize = { title: 'Background Size', classes: getClasses(`auto, cover, contain`, { name: 'bg-', value: 'background-size', scss: 0 }) }
-	const BackgroundImage = {
-		title: 'Background Image',
-		classes: getClasses([
-			{ name: 'none', value: 'none' },
-			{ name: 'gradient-to-t', value: 'linear-gradient(to top, var(--gradient-stops))' },
-			{ name: 'gradient-to-tr', value: 'linear-gradient(to top right, var(--gradient-stops))' },
-			{ name: 'gradient-to-r', value: 'linear-gradient(to right, var(--gradient-stops))' },
-			{ name: 'gradient-to-br', value: 'linear-gradient(to bottom right, var(--gradient-stops))' },
-			{ name: 'gradient-to-b', value: 'linear-gradient(to bottom, var(--gradient-stops))' },
-			{ name: 'gradient-to-bl	', value: 'linear-gradient(to bottom left, var(--gradient-stops))' },
-			{ name: 'gradient-to-l', value: 'linear-gradient(to left, var(--gradient-stops))' },
-			{ name: 'gradient-to-tl', value: 'linear-gradient(to top left, var(--gradient-stops))' },
-		], { name: 'bg-', value: 'background-image', scss: 0 })
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+import useColor from './useColor.js'
+
+function useHook() { // 
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+
+
+	const BackgroundAttachment = { title: 'Background Attachment', classes: getClasses(`fixed, local, scroll`, { name: 'bg-', value: 'background-attachment', scss: 0 }) }
+	const BackgroundClip = {
+		title: 'Background Clip',
+		classes: getClasses([
+			{ name: 'border', value: 'border-box' },
+			{ name: 'padding', value: 'padding-box' },
+			{ name: 'content', value: 'content-box' },
+			{ name: 'text', value: 'text' },
+		], { name: 'bg-clip-', value: 'background-clip', scss: 0 })
+	}
+
+	const BackgroundColor = {
+		title: 'Background Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `bg-${c.name}`,
+				value: [`background: ${c.value};`],
+				bgcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const BackgroundOrigin = {
+		title: 'Background Origin',
+		classes: getClasses([{ name: 'border', value: 'border-box' },
+			{ name: 'padding', value: 'padding-box' },
+			{ name: 'content', value: 'content-box' },
+		], { name: 'bg-origin-', value: 'background-origin', scss: 0 })
+	}
+	const BackgroundPosition = {
+		title: 'Background Position',
+		classes: getClasses([
+			{ name: 'bottom', value: 'bottom' },
+			{ name: 'center', value: 'center' },
+			{ name: 'left', value: 'left' },
+			{ name: 'left-bottom', value: 'left bottom' },
+			{ name: 'left-top', value: 'left top' },
+			{ name: 'right', value: 'right' },
+			{ name: 'right-bottom', value: 'right bottom' },
+			{ name: 'right-top', value: 'right top' },
+			{ name: 'top', value: 'top' },
+		], { name: 'bg-', value: 'background-position', scss: 0 })
+	}
+	const BackgroundRepeat = {
+		title: 'Background Repeat',
+		classes: getClasses([
+			{ name: 'repeat', value: 'repeat' },
+			{ name: 'no-repeat', value: 'no-repeat' },
+			{ name: 'repeat-x', value: 'repeat-x' },
+			{ name: 'repeat-y', value: 'repeat-y' },
+			{ name: 'repeat-round', value: 'round' },
+			{ name: 'repeat-space', value: 'space' },
+		], { name: 'bg-', value: 'background-repeat', scss: 0 })
+	}
+	const BackgroundSize = { title: 'Background Size', classes: getClasses(`auto, cover, contain`, { name: 'bg-', value: 'background-size', scss: 0 }) }
+	const BackgroundImage = {
+		title: 'Background Image',
+		classes: getClasses([
+			{ name: 'none', value: 'none' },
+			{ name: 'gradient-to-t', value: 'linear-gradient(to top, var(--gradient-stops))' },
+			{ name: 'gradient-to-tr', value: 'linear-gradient(to top right, var(--gradient-stops))' },
+			{ name: 'gradient-to-r', value: 'linear-gradient(to right, var(--gradient-stops))' },
+			{ name: 'gradient-to-br', value: 'linear-gradient(to bottom right, var(--gradient-stops))' },
+			{ name: 'gradient-to-b', value: 'linear-gradient(to bottom, var(--gradient-stops))' },
+			{ name: 'gradient-to-bl	', value: 'linear-gradient(to bottom left, var(--gradient-stops))' },
+			{ name: 'gradient-to-l', value: 'linear-gradient(to left, var(--gradient-stops))' },
+			{ name: 'gradient-to-tl', value: 'linear-gradient(to top left, var(--gradient-stops))' },
+		], { name: 'bg-', value: 'background-image', scss: 0 })
 	}
 	
 	function getFromColor() {
@@ -128,28 +128,28 @@ function useHook() { //
 		})
 		return [...froms, ...tos]
 	}
-	
-	const GradientColorStops = {
-		title: 'Gradient Color Stops',
+	
+	const GradientColorStops = {
+		title: 'Gradient Color Stops',
 		classes: [
 			...getFromColor(),
 			...getToColor(),
 			...getPercentFromToColor(),
 		]
 	}
-
-	return {
-		BackgroundAttachment,
-		BackgroundClip,
-		BackgroundColor,
-		BackgroundOrigin,
-		BackgroundPosition,
-		BackgroundRepeat,
-		BackgroundSize,
-		BackgroundImage,
-		GradientColorStops
-	}
-
-}
-
+
+	return {
+		BackgroundAttachment,
+		BackgroundClip,
+		BackgroundColor,
+		BackgroundOrigin,
+		BackgroundPosition,
+		BackgroundRepeat,
+		BackgroundSize,
+		BackgroundImage,
+		GradientColorStops
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useBorders.js

@@ -1,132 +1,132 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useBorders
-	const { colors, color } = useColor()
-	const { pxs, percents, border_radius } = useVars()
-
-	const BorderRadius = {
-		title: 'Border Radius',
-		classes: getClasses(border_radius, {
-			name: [
-				'rounded-',
-				'rounded-s-',
-				'rounded-e-',
-				'rounded-t-',
-				'rounded-r-',
-				'rounded-b-',
-				'rounded-l-',
-				'rounded-ss-',
-				'rounded-se-',
-				'rounded-ee-',
-				'rounded-es-',
-				'rounded-tl-',
-				'rounded-tr-',
-				'rounded-br-',
-				'rounded-bl-'
-			],
-			value: [
-				'border-radius',
-				'border-start-start-radius, border-end-start-radius',
-				'border-start-end-radius, border-end-end-radius',
-				'border-top-left-radius, border-top-right-radius',
-				'border-top-right-radius, border-bottom-right-radius',
-				'border-bottom-right-radius, border-bottom-left-radius',
-				'border-top-left-radius, border-bottom-left-radius',
-				'border-start-start-radius',
-				'border-start-end-radius',
-				'border-end-end-radius',
-				'border-end-start-radius',
-				'border-top-left-radius',
-				'border-top-right-radius',
-				'border-bottom-right-radius',
-				'border-bottom-left-radius',
-			],
-		})
-	}
-
-	const BorderWidth = {
-		title: 'Border Width',
-		classes: getClasses(
-			', 0, 2, 3, 4, 8'.split(',').map(d => {
-				d = d.trim()
-				return {
-					name: d,
-					value: d === '' ? '1rpx' : `${d * 2}rpx`
-				}
-			}), {
-				name: [
-					'border-',
-					'border-x-',
-					'border-y-',
-					'border-s-',
-					'border-e-',
-					'border-t-',
-					'border-r-',
-					'border-b-',
-					'border-l-',
-				],
-				value: [
-					'border-width',
-					'border-left-width, border-right-width',
-					'border-top-width, border-bottom-width',
-					'border-inline-start-width',
-					'border-inline-end-width',
-					'border-top-width',
-					'border-right-width',
-					'border-bottom-width',
-					'border-left-width',
-				],
-			}),
-	}
-	const BorderColor = {
-		title: 'Border Color',
-		classes: color.map(c => {
-			return {
-				...c,
-				name: `border-${c.name}`,
-				value: [`border-color: ${c.value};`],
-				desc: c.rgb,
-			}
-		})
-	}
-
-	const BorderStyle = {
-		title: 'Border Style',
-		classes: getClasses('solid, dashed, dotted, double, hidden, none', { name: 'border-', value: 'border-style' })
-	}
-
-	const DivideWidth = { title: 'Divide Width', classes: [] }
-	const DivideColor = { title: 'Divide Color', classes: [] }
-	const DivideStyle = { title: 'Divide Style', classes: [] }
-	const OutlineWidth = { title: 'Outline Width', classes: [] }
-	const OutlineColor = { title: 'Outline Color', classes: [] }
-	const OutlineStyle = { title: 'Outline Style', classes: [] }
-	const OutlineOffset = { title: 'Outline Offset', classes: [] }
-	const RingWidth = { title: 'Ring Width', classes: [] }
-	const RingColor = { title: 'Ring Color', classes: [] }
-	const RingOffsetWidth = { title: 'Ring Offset Width', classes: [] }
-	const RingOffsetColor = { title: 'Ring Offset Color', classes: [] }
-
-	return {
-		BorderRadius,
-		BorderWidth,
-		BorderColor,
-		BorderStyle,
-		DivideWidth,
-		DivideColor,
-		DivideStyle,
-		OutlineWidth,
-		OutlineColor,
-		OutlineStyle,
-		OutlineOffset,
-		RingWidth,
-		RingColor,
-		RingOffsetWidth,
-		RingOffsetColor
-	}
-
-}
-
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useBorders
+	const { colors, color } = useColor()
+	const { pxs, percents, border_radius } = useVars()
+
+	const BorderRadius = {
+		title: 'Border Radius',
+		classes: getClasses(border_radius, {
+			name: [
+				'rounded-',
+				'rounded-s-',
+				'rounded-e-',
+				'rounded-t-',
+				'rounded-r-',
+				'rounded-b-',
+				'rounded-l-',
+				'rounded-ss-',
+				'rounded-se-',
+				'rounded-ee-',
+				'rounded-es-',
+				'rounded-tl-',
+				'rounded-tr-',
+				'rounded-br-',
+				'rounded-bl-'
+			],
+			value: [
+				'border-radius',
+				'border-start-start-radius, border-end-start-radius',
+				'border-start-end-radius, border-end-end-radius',
+				'border-top-left-radius, border-top-right-radius',
+				'border-top-right-radius, border-bottom-right-radius',
+				'border-bottom-right-radius, border-bottom-left-radius',
+				'border-top-left-radius, border-bottom-left-radius',
+				'border-start-start-radius',
+				'border-start-end-radius',
+				'border-end-end-radius',
+				'border-end-start-radius',
+				'border-top-left-radius',
+				'border-top-right-radius',
+				'border-bottom-right-radius',
+				'border-bottom-left-radius',
+			],
+		})
+	}
+
+	const BorderWidth = {
+		title: 'Border Width',
+		classes: getClasses(
+			', 0, 2, 3, 4, 8'.split(',').map(d => {
+				d = d.trim()
+				return {
+					name: d,
+					value: d === '' ? '1rpx' : `${d * 2}rpx`
+				}
+			}), {
+				name: [
+					'border-',
+					'border-x-',
+					'border-y-',
+					'border-s-',
+					'border-e-',
+					'border-t-',
+					'border-r-',
+					'border-b-',
+					'border-l-',
+				],
+				value: [
+					'border-width',
+					'border-left-width, border-right-width',
+					'border-top-width, border-bottom-width',
+					'border-inline-start-width',
+					'border-inline-end-width',
+					'border-top-width',
+					'border-right-width',
+					'border-bottom-width',
+					'border-left-width',
+				],
+			}),
+	}
+	const BorderColor = {
+		title: 'Border Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `border-${c.name}`,
+				value: [`border-color: ${c.value};`],
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const BorderStyle = {
+		title: 'Border Style',
+		classes: getClasses('solid, dashed, dotted, double, hidden, none', { name: 'border-', value: 'border-style' })
+	}
+
+	const DivideWidth = { title: 'Divide Width', classes: [] }
+	const DivideColor = { title: 'Divide Color', classes: [] }
+	const DivideStyle = { title: 'Divide Style', classes: [] }
+	const OutlineWidth = { title: 'Outline Width', classes: [] }
+	const OutlineColor = { title: 'Outline Color', classes: [] }
+	const OutlineStyle = { title: 'Outline Style', classes: [] }
+	const OutlineOffset = { title: 'Outline Offset', classes: [] }
+	const RingWidth = { title: 'Ring Width', classes: [] }
+	const RingColor = { title: 'Ring Color', classes: [] }
+	const RingOffsetWidth = { title: 'Ring Offset Width', classes: [] }
+	const RingOffsetColor = { title: 'Ring Offset Color', classes: [] }
+
+	return {
+		BorderRadius,
+		BorderWidth,
+		BorderColor,
+		BorderStyle,
+		DivideWidth,
+		DivideColor,
+		DivideStyle,
+		OutlineWidth,
+		OutlineColor,
+		OutlineStyle,
+		OutlineOffset,
+		RingWidth,
+		RingColor,
+		RingOffsetWidth,
+		RingOffsetColor
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useEffects.js

@@ -1,57 +1,57 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useEffects
-	const { colors, color } = useColor()
-	const { pxs, percents } = useVars()
-
-	const BoxShadow = {
-		title: 'Box Shadow',
-		classes: getClasses([
-			{ name: 'shadow-sm', value: '0 1rpx 4rpx 0 rgba(0, 0, 0, 0.05)' },
-			{ name: 'shadow', value: '0 1rpx 6rpx 0 rgba(0, 0, 0, 0.1), 0 1rpx 4rpx -1rpx rgba(0, 0, 0, 0.1)' },
-			{ name: 'shadow-md', value: '0 8rpx 6px -1rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1)' },
-			{ name: 'shadow-lg', value: '0 10px 15px -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 6px -8rpx rgba(0, 0, 0, 0.1)' },
-			{ name: 'shadow-xl', value: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' },
-			{ name: 'shadow-2xl', value: '0 25px 50px -24rpx rgba(0, 0, 0, 0.25)' },
-			{ name: 'shadow-inner', value: 'inset 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05)' },
-			{ name: 'shadow-none', value: '0 0 #000' },
-		], { name: '', value: 'box-shadow', scss: 0 })
-	}
-	
-	const BoxShadowColor = {
-		title: 'Box Shadow Color',
-		classes: color.map(c => {
-			return {
-				...c,
-				name: `shadow-${c.name}`,
-				value: [`--shadow-color: ${c.value};`],
-				desc: c.rgb,
-			}
-		})
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useEffects
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const BoxShadow = {
+		title: 'Box Shadow',
+		classes: getClasses([
+			{ name: 'shadow-sm', value: '0 1rpx 4rpx 0 rgba(0, 0, 0, 0.05)' },
+			{ name: 'shadow', value: '0 1rpx 6rpx 0 rgba(0, 0, 0, 0.1), 0 1rpx 4rpx -1rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-md', value: '0 8rpx 6px -1rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-lg', value: '0 10px 15px -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 6px -8rpx rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-xl', value: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' },
+			{ name: 'shadow-2xl', value: '0 25px 50px -24rpx rgba(0, 0, 0, 0.25)' },
+			{ name: 'shadow-inner', value: 'inset 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05)' },
+			{ name: 'shadow-none', value: '0 0 #000' },
+		], { name: '', value: 'box-shadow', scss: 0 })
+	}
+	
+	const BoxShadowColor = {
+		title: 'Box Shadow Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `shadow-${c.name}`,
+				value: [`--shadow-color: ${c.value};`],
+				desc: c.rgb,
+			}
+		})
 	}
 
-	const Opacity = {
-		title: 'Opacity',
+	const Opacity = {
+		title: 'Opacity',
 		classes: getClasses([0,5,10,20,25,30,40,50,60,70,75,80,90,95,100].map(d => {
 			return {
 				name: d,
 				value: d / 100
 			}
-		}), { name: 'opacity-', value: 'opacity', scss: 0 })
-	}
-	const MixBlendMode = { title: 'Mix Blend Mode', classes: [] }
-	const BackgroundBlendMode = { title: 'Background Blend Mode', classes: [] }
-
-	return {
-		BoxShadow,
-		BoxShadowColor,
-		Opacity,
-		MixBlendMode,
-		BackgroundBlendMode
-	}
-
-}
-
+		}), { name: 'opacity-', value: 'opacity', scss: 0 })
+	}
+	const MixBlendMode = { title: 'Mix Blend Mode', classes: [] }
+	const BackgroundBlendMode = { title: 'Background Blend Mode', classes: [] }
+
+	return {
+		BoxShadow,
+		BoxShadowColor,
+		Opacity,
+		MixBlendMode,
+		BackgroundBlendMode
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useFilters.js

@@ -1,94 +1,94 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useFilters
-	const { colors, color } = useColor()
-	const { pxs, percents } = useVars()
-
-	const Blur = {
-		title: 'Blur',
-		classes: getClasses([
-			{ name: 'blur-none', value: 'blur(0)' },
-			{ name: 'blur-sm', value: `blur(${4 * 2}rpx)` },
-			{ name: 'blur', value: `blur(${8 * 2}rpx)` },
-			{ name: 'blur-md', value: `blur(${12 * 2}rpx)` },
-			{ name: 'blur-lg', value: `blur(${16 * 2}rpx)` },
-			{ name: 'blur-xl', value: `blur(${24 * 2}rpx)` },
-			{ name: 'blur-2xl', value: `blur(${40 * 2}rpx)` },
-			{ name: 'blur-3xl', value: `blur(${64 * 2}rpx)` },
-		], { name: '', value: 'filter', scss: 0 })
-	}
-	const Brightness = { title: 'Brightness', classes: [] }
-	const Contrast = { title: 'Contrast', classes: [] }
-	const DropShadow = {
-		title: 'Drop Shadow',
-		classes: getClasses([
-			{ name: 'drop-shadow-sm', value: 'drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.05))' },
-			{ name: 'drop-shadow', value: 'drop-shadow(0 1rpx 4rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.06))' },
-			{ name: 'drop-shadow-md', value: 'drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.07)) drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06))' },
-			{ name: 'drop-shadow-lg', value: 'drop-shadow(0 20rpx 16rpx rgba(0, 0, 0, 0.04)) drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.1))' },
-			{ name: 'drop-shadow-xl', value: 'drop-shadow(0 40rpx 26rpx rgba(0, 0, 0, 0.03)) drop-shadow(0 16rpx 10rpx rgba(0, 0, 0, 0.08))' },
-			{ name: 'drop-shadow-2xl', value: 'drop-shadow(0 50rpx 50rpx rgba(0, 0, 0, 0.15))' },
-			{ name: 'drop-shadow-none', value: 'drop-shadow(0 0 rgba(0,0,0,0))' },
-		], { name: '', value: 'filter', scss: 0 })
-	}
-	const Grayscale = { title: 'Grayscale', classes: [] }
-	const HueRotate = { title: 'Hue Rotate', classes: [] }
-	const Invert = { title: 'Invert', classes: [] }
-	const Saturate = { title: 'Saturate', classes: [] }
-	const Sepia = { title: 'Sepia', classes: [] }
-	const BackdropBlur = {
-		title: 'Backdrop Blur',
-		classes: getClasses([
-			{ name: 'none', value: `blur(0)` },
-			{ name: 'sm', value: `blur(${4 * 2}rpx)` },
-			{ name: '', value: `blur(${8 * 2}rpx)` },
-			{ name: 'md', value: `blur(${12 * 2}rpx)` },
-			{ name: 'lg', value: `blur(${16 * 2}rpx)` },
-			{ name: 'xl', value: `blur(${24 * 2}rpx)` },
-			{ name: '2xl', value: `blur(${40 * 2}rpx)` },
-			{ name: '3xl', value: `blur(${64 * 2}rpx)` },
-		], { name: 'backdrop-blur-', value: 'backdrop-filter', scss: 0 })
-	}
-	const BackdropBrightness = { title: 'Backdrop Brightness', classes: [] }
-	const BackdropContrast = { title: 'Backdrop Contrast', classes: [] }
-	const BackdropGrayscale = { title: 'Backdrop Grayscale', classes: [] }
-	const BackdropHueRotate = { title: 'Backdrop Hue Rotate', classes: [] }
-	const BackdropInvert = { title: 'Backdrop Invert', classes: [] }
-	const BackdropOpacity = {
-		title: 'Backdrop Opacity',
-		classes: getClasses([0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100].map(d => {
-			return {
-				name: d,
-				value: `opacity(${d / 100})`
-			}
-		}), { name: 'backdrop-opacity-', value: 'backdrop-filter', scss: 0 })
-	}
-	const BackdropSaturate = { title: 'Backdrop Saturate', classes: [] }
-	const BackdropSepia = { title: 'Backdrop Sepia', classes: [] }
-
-	return {
-		Blur,
-		Brightness,
-		Contrast,
-		DropShadow,
-		Grayscale,
-		HueRotate,
-		Invert,
-		Saturate,
-		Sepia,
-		BackdropBlur,
-		BackdropBrightness,
-		BackdropContrast,
-		BackdropGrayscale,
-		BackdropHueRotate,
-		BackdropInvert,
-		BackdropOpacity,
-		BackdropSaturate,
-		BackdropSepia
-	}
-
-}
-
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useFilters
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const Blur = {
+		title: 'Blur',
+		classes: getClasses([
+			{ name: 'blur-none', value: 'blur(0)' },
+			{ name: 'blur-sm', value: `blur(${4 * 2}rpx)` },
+			{ name: 'blur', value: `blur(${8 * 2}rpx)` },
+			{ name: 'blur-md', value: `blur(${12 * 2}rpx)` },
+			{ name: 'blur-lg', value: `blur(${16 * 2}rpx)` },
+			{ name: 'blur-xl', value: `blur(${24 * 2}rpx)` },
+			{ name: 'blur-2xl', value: `blur(${40 * 2}rpx)` },
+			{ name: 'blur-3xl', value: `blur(${64 * 2}rpx)` },
+		], { name: '', value: 'filter', scss: 0 })
+	}
+	const Brightness = { title: 'Brightness', classes: [] }
+	const Contrast = { title: 'Contrast', classes: [] }
+	const DropShadow = {
+		title: 'Drop Shadow',
+		classes: getClasses([
+			{ name: 'drop-shadow-sm', value: 'drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.05))' },
+			{ name: 'drop-shadow', value: 'drop-shadow(0 1rpx 4rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.06))' },
+			{ name: 'drop-shadow-md', value: 'drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.07)) drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06))' },
+			{ name: 'drop-shadow-lg', value: 'drop-shadow(0 20rpx 16rpx rgba(0, 0, 0, 0.04)) drop-shadow(0 8rpx 6rpx rgba(0, 0, 0, 0.1))' },
+			{ name: 'drop-shadow-xl', value: 'drop-shadow(0 40rpx 26rpx rgba(0, 0, 0, 0.03)) drop-shadow(0 16rpx 10rpx rgba(0, 0, 0, 0.08))' },
+			{ name: 'drop-shadow-2xl', value: 'drop-shadow(0 50rpx 50rpx rgba(0, 0, 0, 0.15))' },
+			{ name: 'drop-shadow-none', value: 'drop-shadow(0 0 rgba(0,0,0,0))' },
+		], { name: '', value: 'filter', scss: 0 })
+	}
+	const Grayscale = { title: 'Grayscale', classes: [] }
+	const HueRotate = { title: 'Hue Rotate', classes: [] }
+	const Invert = { title: 'Invert', classes: [] }
+	const Saturate = { title: 'Saturate', classes: [] }
+	const Sepia = { title: 'Sepia', classes: [] }
+	const BackdropBlur = {
+		title: 'Backdrop Blur',
+		classes: getClasses([
+			{ name: 'none', value: `blur(0)` },
+			{ name: 'sm', value: `blur(${4 * 2}rpx)` },
+			{ name: '', value: `blur(${8 * 2}rpx)` },
+			{ name: 'md', value: `blur(${12 * 2}rpx)` },
+			{ name: 'lg', value: `blur(${16 * 2}rpx)` },
+			{ name: 'xl', value: `blur(${24 * 2}rpx)` },
+			{ name: '2xl', value: `blur(${40 * 2}rpx)` },
+			{ name: '3xl', value: `blur(${64 * 2}rpx)` },
+		], { name: 'backdrop-blur-', value: 'backdrop-filter', scss: 0 })
+	}
+	const BackdropBrightness = { title: 'Backdrop Brightness', classes: [] }
+	const BackdropContrast = { title: 'Backdrop Contrast', classes: [] }
+	const BackdropGrayscale = { title: 'Backdrop Grayscale', classes: [] }
+	const BackdropHueRotate = { title: 'Backdrop Hue Rotate', classes: [] }
+	const BackdropInvert = { title: 'Backdrop Invert', classes: [] }
+	const BackdropOpacity = {
+		title: 'Backdrop Opacity',
+		classes: getClasses([0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100].map(d => {
+			return {
+				name: d,
+				value: `opacity(${d / 100})`
+			}
+		}), { name: 'backdrop-opacity-', value: 'backdrop-filter', scss: 0 })
+	}
+	const BackdropSaturate = { title: 'Backdrop Saturate', classes: [] }
+	const BackdropSepia = { title: 'Backdrop Sepia', classes: [] }
+
+	return {
+		Blur,
+		Brightness,
+		Contrast,
+		DropShadow,
+		Grayscale,
+		HueRotate,
+		Invert,
+		Saturate,
+		Sepia,
+		BackdropBlur,
+		BackdropBrightness,
+		BackdropContrast,
+		BackdropGrayscale,
+		BackdropHueRotate,
+		BackdropInvert,
+		BackdropOpacity,
+		BackdropSaturate,
+		BackdropSepia
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useFlexboxGrid.js

@@ -1,196 +1,196 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-function getGridTemplateRepeats(max = 12) {
-	const arr = new Array(max).fill('').map((d, i) => {
-		let index = i + 1
-		return {
-			name: index,
-			value: `repeat(${index}, minmax(0, 1fr))`
-		}
-	})
-	return arr
-}
-
-function getGridColumnStartEnd(name = 'col', vname = 'column', max = 12) {
-	let arr = [{ name: `${name}-auto`, value: [`grid-${vname}: auto;`] }]
-	for (let i = 1; i <= max; i++) {
-		if (i <= max) {
-			arr.push({ name: `${name}-span-${i}`, value: [`grid-${vname}: span ${i} / span ${i};`] })
-		}
-		arr.push({ name: `${name}-start-${i}`, value: [`grid-${vname}-start: ${i};`] })
-		arr.push({ name: `${name}-end-${i}`, value: [`grid-${vname}-end: ${i};`] })
-	}
-	arr.push({ name: `${name}-span-full`, value: [`grid-${vname}: 1 / -1;`] })
-	arr.push({ name: `${name}-start-auto`, value: [`grid-${vname}-start: auto;`] })
-	arr.push({ name: `${name}-end-auto`, value: [`grid-${vname}-end: auto;`] })
-	return arr
-}
-
-
-function useHook() { // useFlexboxGrid
-	const { pxs, percents } = useVars()
-
-	const FlexBasis = {
-		title: 'Flex Basis',
-		classes: [...getClasses(pxs, {
-			name: ['basis-'],
-			value: ['flex-basis'],
-		}), ...getClasses(percents, {
-			name: ['basis-'],
-			value: ['flex-basis'],
-		})]
-	}
-	const FlexDirection = {
-		title: 'Flex Direction',
-		classes: getClasses('row, row-reverse, col, col-reverse', { name: 'flex-', value: 'flex-direction' }),
-	}
-
-	const FlexWrap = {
-		title: 'Flex Wrap',
-		classes: getClasses('wrap, wrap-reverse, nowrap', { name: 'flex-', value: 'flex-wrap' }),
-	}
-
-	const Flex = {
-		title: 'Flex',
-		classes: getClasses('1: 1 1 0%, auto: 1 1 0%, initial: 0 1 auto, none', { name: 'flex-', value: 'flex' }),
-	}
-
-	const FlexGrow = {
-		title: 'Flex Grow',
-		classes: getClasses(':1, 0', { name: 'grow-', value: 'grow' }),
-	}
-
-	const FlexShrink = {
-		title: 'Flex Shrink',
-		classes: getClasses(':1, 0', { name: 'shrink-', value: 'shrink' }),
-	}
-
-	const Order = {
-		title: 'Order',
-		classes: getClasses('1,2,3,4,5,6,7,8,9,10,11,12,first: -9999,last: 9999,none: 0', { name: 'order-', value: 'order' }),
-	}
-
-	const GridTemplateColumns = {
-		title: 'Grid Template Columns',
-		classes: getClasses([...getGridTemplateRepeats(12), { name: 'none' }], { name: 'grid-cols-', value: 'grid-template-columns' }),
-	}
-
-	const GridColumnStartEnd = {
-		title: 'Grid Column Start End',
-		classes: getGridColumnStartEnd(),
-	}
-
-	const GridTemplateRows = {
-		title: 'Grid Template Rows',
-		classes: getClasses([...getGridTemplateRepeats(6), { name: 'none' }], { name: 'grid-rows-', value: 'grid-template-rows' }),
-	}
-
-	const GridRowStartEnd = {
-		title: 'Grid Row Start End',
-		classes: getGridColumnStartEnd('row', 'row', 6),
-	}
-
-	const GridAutoFlow = {
-		title: 'Grid Auto Flow',
-		classes: getClasses('row, col, dense, row-dense, col-dense', { name: 'grid-flow-', value: 'grid-auto-flow' }),
-	}
-
-	const GridAutoColumns = {
-		title: 'Grid Auto Columns',
-		classes: getClasses([
-			{ name: 'auto', value: 'auto' },
-			{ name: 'min', value: 'min-content' },
-			{ name: 'max', value: 'max-content' },
-			{ name: 'fr', value: 'minmax(0, 1fr)' },
-		], { name: 'auto-cols-', value: 'grid-auto-columns' }),
-	}
-
-	const GridAutoRows = {
-		title: 'Grid Auto Rows',
-		classes: getClasses([
-			{ name: 'auto', value: 'auto' },
-			{ name: 'min', value: 'min-content' },
-			{ name: 'max', value: 'max-content' },
-			{ name: 'fr', value: 'minmax(0, 1fr)' },
-		], { name: 'auto-rows-', value: 'grid-auto-rows' }),
-	}
-
-	const Gap = {
-		title: 'Gap',
-		classes: getClasses(pxs, { name: ['gap-', 'gap-x-', 'gap-y-'], value: ['gap', 'column-gap', 'row-gap'] }),
-	}
-
-	const JustifyContent = {
-		title: 'Justify Content',
-		classes: getClasses('normal, start: flex-start, end: flex-end, center, between: space-between, around: space-around, evenly: space-evenly, stretch', { name: 'justify-', value: 'justify-content' }),
-	}
-
-	const JustifyItems = {
-		title: 'Justify Items',
-		classes: getClasses('start, end, center, stretch', { name: 'justify-items-', value: 'justify-items' }),
-	}
-
-	const JustifySelf = {
-		title: 'Justify Self',
-		classes: getClasses('auto, start, end, center, stretch', { name: 'justify-self-', value: 'justify-self' }),
-	}
-
-	const AlignContent = {
-		title: 'Align Content',
-		classes: getClasses('normal, center, start: flex-start, end: flex-end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'content-', value: 'align-content' }),
-	}
-
-	const AlignItems = {
-		title: 'Align Items',
-		classes: getClasses('start: flex-start, end, center, baseline, stretch', { name: 'items-', value: 'align-items' }),
-	}
-
-	const AlignSelf = {
-		title: 'Align Self',
-		classes: getClasses('auto, start: flex-start, end: flex-end, center, stretch, baseline', { name: 'self-', value: 'align-self' }),
-	}
-	const PlaceContent = {
-		title: 'Place Content',
-		classes: getClasses('center, start, end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'place-content-', value: 'place-content' }),
-	}
-	const PlaceItems = {
-		title: 'Place Items',
-		classes: getClasses('start, end, center, baseline, stretch', { name: 'place-items-', value: 'place-items' }),
-	}
-	const PlaceSelf = {
-		title: 'Place Self',
-		classes: getClasses('auto, start, end, center, stretch', { name: 'place-self-', value: 'place-self' }),
-	}
-
-
-	return {
-		FlexBasis,
-		FlexDirection,
-		FlexWrap,
-		Flex,
-		FlexGrow,
-		FlexShrink,
-		Order,
-		GridTemplateColumns,
-		GridColumnStartEnd,
-		GridTemplateRows,
-		GridRowStartEnd,
-		GridAutoFlow,
-		GridAutoColumns,
-		GridAutoRows,
-		Gap,
-		JustifyContent,
-		JustifyItems,
-		JustifySelf,
-		AlignContent,
-		AlignItems,
-		AlignSelf,
-		PlaceContent,
-		PlaceItems,
-		PlaceSelf
-	}
-
-}
-
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function getGridTemplateRepeats(max = 12) {
+	const arr = new Array(max).fill('').map((d, i) => {
+		let index = i + 1
+		return {
+			name: index,
+			value: `repeat(${index}, minmax(0, 1fr))`
+		}
+	})
+	return arr
+}
+
+function getGridColumnStartEnd(name = 'col', vname = 'column', max = 12) {
+	let arr = [{ name: `${name}-auto`, value: [`grid-${vname}: auto;`] }]
+	for (let i = 1; i <= max; i++) {
+		if (i <= max) {
+			arr.push({ name: `${name}-span-${i}`, value: [`grid-${vname}: span ${i} / span ${i};`] })
+		}
+		arr.push({ name: `${name}-start-${i}`, value: [`grid-${vname}-start: ${i};`] })
+		arr.push({ name: `${name}-end-${i}`, value: [`grid-${vname}-end: ${i};`] })
+	}
+	arr.push({ name: `${name}-span-full`, value: [`grid-${vname}: 1 / -1;`] })
+	arr.push({ name: `${name}-start-auto`, value: [`grid-${vname}-start: auto;`] })
+	arr.push({ name: `${name}-end-auto`, value: [`grid-${vname}-end: auto;`] })
+	return arr
+}
+
+
+function useHook() { // useFlexboxGrid
+	const { pxs, percents } = useVars()
+
+	const FlexBasis = {
+		title: 'Flex Basis',
+		classes: [...getClasses(pxs, {
+			name: ['basis-'],
+			value: ['flex-basis'],
+		}), ...getClasses(percents, {
+			name: ['basis-'],
+			value: ['flex-basis'],
+		})]
+	}
+	const FlexDirection = {
+		title: 'Flex Direction',
+		classes: getClasses('row, row-reverse, col, col-reverse', { name: 'flex-', value: 'flex-direction' }),
+	}
+
+	const FlexWrap = {
+		title: 'Flex Wrap',
+		classes: getClasses('wrap, wrap-reverse, nowrap', { name: 'flex-', value: 'flex-wrap' }),
+	}
+
+	const Flex = {
+		title: 'Flex',
+		classes: getClasses('1: 1 1 0%, auto: 1 1 0%, initial: 0 1 auto, none', { name: 'flex-', value: 'flex' }),
+	}
+
+	const FlexGrow = {
+		title: 'Flex Grow',
+		classes: getClasses(':1, 0', { name: 'grow-', value: 'grow' }),
+	}
+
+	const FlexShrink = {
+		title: 'Flex Shrink',
+		classes: getClasses(':1, 0', { name: 'shrink-', value: 'shrink' }),
+	}
+
+	const Order = {
+		title: 'Order',
+		classes: getClasses('1,2,3,4,5,6,7,8,9,10,11,12,first: -9999,last: 9999,none: 0', { name: 'order-', value: 'order' }),
+	}
+
+	const GridTemplateColumns = {
+		title: 'Grid Template Columns',
+		classes: getClasses([...getGridTemplateRepeats(12), { name: 'none' }], { name: 'grid-cols-', value: 'grid-template-columns' }),
+	}
+
+	const GridColumnStartEnd = {
+		title: 'Grid Column Start End',
+		classes: getGridColumnStartEnd(),
+	}
+
+	const GridTemplateRows = {
+		title: 'Grid Template Rows',
+		classes: getClasses([...getGridTemplateRepeats(6), { name: 'none' }], { name: 'grid-rows-', value: 'grid-template-rows' }),
+	}
+
+	const GridRowStartEnd = {
+		title: 'Grid Row Start End',
+		classes: getGridColumnStartEnd('row', 'row', 6),
+	}
+
+	const GridAutoFlow = {
+		title: 'Grid Auto Flow',
+		classes: getClasses('row, col, dense, row-dense, col-dense', { name: 'grid-flow-', value: 'grid-auto-flow' }),
+	}
+
+	const GridAutoColumns = {
+		title: 'Grid Auto Columns',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'min', value: 'min-content' },
+			{ name: 'max', value: 'max-content' },
+			{ name: 'fr', value: 'minmax(0, 1fr)' },
+		], { name: 'auto-cols-', value: 'grid-auto-columns' }),
+	}
+
+	const GridAutoRows = {
+		title: 'Grid Auto Rows',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'min', value: 'min-content' },
+			{ name: 'max', value: 'max-content' },
+			{ name: 'fr', value: 'minmax(0, 1fr)' },
+		], { name: 'auto-rows-', value: 'grid-auto-rows' }),
+	}
+
+	const Gap = {
+		title: 'Gap',
+		classes: getClasses(pxs, { name: ['gap-', 'gap-x-', 'gap-y-'], value: ['gap', 'column-gap', 'row-gap'] }),
+	}
+
+	const JustifyContent = {
+		title: 'Justify Content',
+		classes: getClasses('normal, start: flex-start, end: flex-end, center, between: space-between, around: space-around, evenly: space-evenly, stretch', { name: 'justify-', value: 'justify-content' }),
+	}
+
+	const JustifyItems = {
+		title: 'Justify Items',
+		classes: getClasses('start, end, center, stretch', { name: 'justify-items-', value: 'justify-items' }),
+	}
+
+	const JustifySelf = {
+		title: 'Justify Self',
+		classes: getClasses('auto, start, end, center, stretch', { name: 'justify-self-', value: 'justify-self' }),
+	}
+
+	const AlignContent = {
+		title: 'Align Content',
+		classes: getClasses('normal, center, start: flex-start, end: flex-end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'content-', value: 'align-content' }),
+	}
+
+	const AlignItems = {
+		title: 'Align Items',
+		classes: getClasses('start: flex-start, end, center, baseline, stretch', { name: 'items-', value: 'align-items' }),
+	}
+
+	const AlignSelf = {
+		title: 'Align Self',
+		classes: getClasses('auto, start: flex-start, end: flex-end, center, stretch, baseline', { name: 'self-', value: 'align-self' }),
+	}
+	const PlaceContent = {
+		title: 'Place Content',
+		classes: getClasses('center, start, end, between: space-between, around: space-around, evenly: space-evenly, baseline, stretch', { name: 'place-content-', value: 'place-content' }),
+	}
+	const PlaceItems = {
+		title: 'Place Items',
+		classes: getClasses('start, end, center, baseline, stretch', { name: 'place-items-', value: 'place-items' }),
+	}
+	const PlaceSelf = {
+		title: 'Place Self',
+		classes: getClasses('auto, start, end, center, stretch', { name: 'place-self-', value: 'place-self' }),
+	}
+
+
+	return {
+		FlexBasis,
+		FlexDirection,
+		FlexWrap,
+		Flex,
+		FlexGrow,
+		FlexShrink,
+		Order,
+		GridTemplateColumns,
+		GridColumnStartEnd,
+		GridTemplateRows,
+		GridRowStartEnd,
+		GridAutoFlow,
+		GridAutoColumns,
+		GridAutoRows,
+		Gap,
+		JustifyContent,
+		JustifyItems,
+		JustifySelf,
+		AlignContent,
+		AlignItems,
+		AlignSelf,
+		PlaceContent,
+		PlaceItems,
+		PlaceSelf
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useInteractivity.js

@@ -1,31 +1,31 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useInteractivity
-	const { colors, color } = useColor()
-	const { pxs, percents } = useVars()
-	
-	const AccentColor = { title: 'Accent Color', classes: [] }
-	const Appearance = { title: 'Appearance', classes: getClasses('none', {name: 'appearance-', value: 'appearance', scss: 0}) }
-	const Cursor = { title: 'Cursor', classes: [] }
-	const CaretColor = { title: 'Caret Color', classes: [] }
-	const PointerEvents = { title: 'Pointer Events', classes: getClasses('none, auto', {name: 'pointer-events-', value: 'pointer-events', scss: 0}) }
-	const Resize = { title: 'Resize', classes: [] }
-	const ScrollBehavior = { title: 'Scroll Behavior', classes: getClasses('auto, smooth', {name: 'scroll-', value: 'scroll-behavior', scss: 0}) }
-	const ScrollMargin = { title: 'Scroll Margin', classes: [] }
-	const ScrollPadding = { title: 'Scroll Padding', classes: [] }
-	const ScrollSnapAlign = { title: 'Scroll Snap Align', classes: [] }
-	const ScrollSnapStop = { title: 'Scroll Snap Stop', classes: [] }
-	const ScrollSnapType = { title: 'Scroll Snap Type', classes: [] }
-	const TouchAction = { title: 'Touch Action', classes: [] }
-	const UserSelect = { title: 'User Select', classes: getClasses('none, text, all, auto', {name: 'select-', value: 'user-select', scss: 0}) }
-	const WillChange = { title: 'Will Change', classes: getClasses('auto, scroll: scroll-position,contents,transform', {name: 'will-change-', value: 'will-change', scss: 0}) }
-
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useInteractivity
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+	
+	const AccentColor = { title: 'Accent Color', classes: [] }
+	const Appearance = { title: 'Appearance', classes: getClasses('none', {name: 'appearance-', value: 'appearance', scss: 0}) }
+	const Cursor = { title: 'Cursor', classes: [] }
+	const CaretColor = { title: 'Caret Color', classes: [] }
+	const PointerEvents = { title: 'Pointer Events', classes: getClasses('none, auto', {name: 'pointer-events-', value: 'pointer-events', scss: 0}) }
+	const Resize = { title: 'Resize', classes: [] }
+	const ScrollBehavior = { title: 'Scroll Behavior', classes: getClasses('auto, smooth', {name: 'scroll-', value: 'scroll-behavior', scss: 0}) }
+	const ScrollMargin = { title: 'Scroll Margin', classes: [] }
+	const ScrollPadding = { title: 'Scroll Padding', classes: [] }
+	const ScrollSnapAlign = { title: 'Scroll Snap Align', classes: [] }
+	const ScrollSnapStop = { title: 'Scroll Snap Stop', classes: [] }
+	const ScrollSnapType = { title: 'Scroll Snap Type', classes: [] }
+	const TouchAction = { title: 'Touch Action', classes: [] }
+	const UserSelect = { title: 'User Select', classes: getClasses('none, text, all, auto', {name: 'select-', value: 'user-select', scss: 0}) }
+	const WillChange = { title: 'Will Change', classes: getClasses('auto, scroll: scroll-position,contents,transform', {name: 'will-change-', value: 'will-change', scss: 0}) }
+
 	return {
-		AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, UserSelect, WillChange
-	}
-
-}
-
+		AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, UserSelect, WillChange
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useLayout.js

@@ -1,148 +1,148 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-function useHook() { // useLayout
-	const { pxs, percents } = useVars()
-
-	const AspectRatio = {
-		title: 'Aspect Ratio',
-		classes: getClasses([
-			{ name: 'auto', value: 'auto' },
-			{ name: 'square', value: '1 / 1' },
-			{ name: 'video', value: '16 / 9' },
-		], {
-			name: 'aspect-',
-			value: 'aspect-ratio'
-		})
-	}
-
-	const BoxSizing = ({
-		title: 'Box Sizing',
-		classes: getClasses([
-			{ name: 'border', value: 'border-box' },
-			{ name: 'content', value: 'content-box' },
-		], {
-			name: 'box-',
-			value: 'box-sizing'
-		})
-	})
-
-	const Display = {
-		title: 'Display',
-		classes: getClasses('block, inline-block, inline, flex, inline-flex, flow-root, grid, inline-grid, contents, list-item, hidden: none', {
-			name: '',
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useLayout
+	const { pxs, percents } = useVars()
+
+	const AspectRatio = {
+		title: 'Aspect Ratio',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'square', value: '1 / 1' },
+			{ name: 'video', value: '16 / 9' },
+		], {
+			name: 'aspect-',
+			value: 'aspect-ratio'
+		})
+	}
+
+	const BoxSizing = ({
+		title: 'Box Sizing',
+		classes: getClasses([
+			{ name: 'border', value: 'border-box' },
+			{ name: 'content', value: 'content-box' },
+		], {
+			name: 'box-',
+			value: 'box-sizing'
+		})
+	})
+
+	const Display = {
+		title: 'Display',
+		classes: getClasses('block, inline-block, inline, flex, inline-flex, flow-root, grid, inline-grid, contents, list-item, hidden: none', {
+			name: '',
 			value: 'display',
-			scss: 0
-		})
-	}
-
-	const Floats = {
-		title: 'Floats',
-		classes: getClasses('left, right, none', {
-			name: 'float-',
-			value: 'float',
-		})
-	}
-
-	const Clear = {
-		title: 'Clear',
-		classes: getClasses('left, right, both, none', {
-			name: 'clear-',
-			value: 'clear',
-		})
-	}
-
-	const Isolation = {
-		title: 'Isolation',
-		classes: getClasses('isolate ,isolation-auto', {
-			name: '',
-			value: 'isolation',
-		})
-	}
-
-	const ObjectFit = {
-		title: 'Object Fit',
-		classes: getClasses('contain, cover, fill, none, scale-down', {
-			name: 'object-',
-			value: 'object-fit',
-		})
-	}
-
-	const ObjectPosition = {
-		title: 'Object Position',
-		classes: getClasses('bottom, center, left, left-bottom, left-top, right, right-bottom, right-top, top', {
-			name: 'object-',
-			value: 'object-position',
-		})
-	}
-
-	const Overflow = {
-		title: 'Overflow',
-		classes: getClasses('auto, hidden, clip, visible, scroll', {
-			name: ['overflow-', 'overflow-x-', 'overflow-y-'],
-			value: ['overflow', 'overflow-x', 'overflow-y'],
-		})
-	}
-
-	const OverscrollBehavior = {
-		title: 'Overscroll Behavior',
-		classes: getClasses('auto, contain, none', {
-			name: ['overscroll-', 'overscroll-x-', 'overscroll-y-'],
-			value: ['overscroll-behavior', 'overscroll-behavior-x', 'overscroll-behavior-y'],
-		})
-	}
-
-	const Position = {
-		title: 'Position',
-		classes: getClasses('static, fixed, absolute, relative, sticky', {
-			name: '',
-			value: 'position',
-		})
-	}
-
-	const TopRightBottomLeft = {
-		title: 'Top / Right / Bottom / Left',
-		classes: getClasses(pxs, {
-			name: ['inset-', 'inset-x-', 'inset-y-', 'start-', 'end-', 'top-', 'right-', 'bottom-', 'left-'],
-			value: ['inset', 'left, right', 'top, bottom', 'inset-inline-start', 'inset-inline-end', 'top', 'right', 'bottom', 'left'],
-		})
-	}
-
-	const Visibility = {
-		title: 'Visibility',
-		classes: getClasses('visible, invisible, collapse', {
-			name: '',
-			value: 'visibility',
-		})
-	}
-
-	const ZIndex = {
-		title: 'Z-Index',
-		classes: getClasses('0, 10, 20, 30, 40, 50, auto', {
-			name: 'z-',
-			value: 'z-index',
-		})
-	}
-
-
-
-	return {
-		AspectRatio,
-		BoxSizing,
-		Display,
-		Floats,
-		Clear,
-		Isolation,
-		ObjectFit,
-		ObjectPosition,
-		Overflow,
-		OverscrollBehavior,
-		Position,
-		TopRightBottomLeft,
-		Visibility,
-		ZIndex
-	}
-
-}
-
+			scss: 0
+		})
+	}
+
+	const Floats = {
+		title: 'Floats',
+		classes: getClasses('left, right, none', {
+			name: 'float-',
+			value: 'float',
+		})
+	}
+
+	const Clear = {
+		title: 'Clear',
+		classes: getClasses('left, right, both, none', {
+			name: 'clear-',
+			value: 'clear',
+		})
+	}
+
+	const Isolation = {
+		title: 'Isolation',
+		classes: getClasses('isolate ,isolation-auto', {
+			name: '',
+			value: 'isolation',
+		})
+	}
+
+	const ObjectFit = {
+		title: 'Object Fit',
+		classes: getClasses('contain, cover, fill, none, scale-down', {
+			name: 'object-',
+			value: 'object-fit',
+		})
+	}
+
+	const ObjectPosition = {
+		title: 'Object Position',
+		classes: getClasses('bottom, center, left, left-bottom, left-top, right, right-bottom, right-top, top', {
+			name: 'object-',
+			value: 'object-position',
+		})
+	}
+
+	const Overflow = {
+		title: 'Overflow',
+		classes: getClasses('auto, hidden, clip, visible, scroll', {
+			name: ['overflow-', 'overflow-x-', 'overflow-y-'],
+			value: ['overflow', 'overflow-x', 'overflow-y'],
+		})
+	}
+
+	const OverscrollBehavior = {
+		title: 'Overscroll Behavior',
+		classes: getClasses('auto, contain, none', {
+			name: ['overscroll-', 'overscroll-x-', 'overscroll-y-'],
+			value: ['overscroll-behavior', 'overscroll-behavior-x', 'overscroll-behavior-y'],
+		})
+	}
+
+	const Position = {
+		title: 'Position',
+		classes: getClasses('static, fixed, absolute, relative, sticky', {
+			name: '',
+			value: 'position',
+		})
+	}
+
+	const TopRightBottomLeft = {
+		title: 'Top / Right / Bottom / Left',
+		classes: getClasses(pxs, {
+			name: ['inset-', 'inset-x-', 'inset-y-', 'start-', 'end-', 'top-', 'right-', 'bottom-', 'left-'],
+			value: ['inset', 'left, right', 'top, bottom', 'inset-inline-start', 'inset-inline-end', 'top', 'right', 'bottom', 'left'],
+		})
+	}
+
+	const Visibility = {
+		title: 'Visibility',
+		classes: getClasses('visible, invisible, collapse', {
+			name: '',
+			value: 'visibility',
+		})
+	}
+
+	const ZIndex = {
+		title: 'Z-Index',
+		classes: getClasses('0, 10, 20, 30, 40, 50, auto', {
+			name: 'z-',
+			value: 'z-index',
+		})
+	}
+
+
+
+	return {
+		AspectRatio,
+		BoxSizing,
+		Display,
+		Floats,
+		Clear,
+		Isolation,
+		ObjectFit,
+		ObjectPosition,
+		Overflow,
+		OverscrollBehavior,
+		Position,
+		TopRightBottomLeft,
+		Visibility,
+		ZIndex
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useSizes.js

@@ -1,94 +1,94 @@
-function getPxs() {
-	const _Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
-	let Pxs = [{ name: 'px', px: 1 }]
-	_Sizes.map(d => {
-		let d5 = d * 5,
-			d10 = d * 10
-		if (d5 > 0 && d5 <= 40 && d5 % 5 == 0 && d5 % 10 != 0) {
-			Pxs.push({ name: d5, px: d * 2 })
-		}
-		Pxs.push({ name: d10, px: d * 4 })
-	})
-	Pxs = Pxs.sort((n1, n2) => n1.px - n2.px).map(d => {
-		d.name10 = d.name
-		if (d.name != 'px') {
-			let _name = d.name / 10
-			if (_name % 1 == 0) {
-				d.name = _name
-			} else {
-				d.name = `${_name}`.replace(/\./g, '-')
-			}
-			d._name = _name
-		}
-		return d
-	})
-	let sass = '',
-		sassName = ''
-	Pxs.map(d => {
-		sass += `,'${d.name}' ${d.px} `
-		sassName += `,'${d.name}' `
-	})
-	sass = sass.substring(1)
-	sassName = sassName.substring(1)
-
-	return { Pxs, pxsass: sass, pxSassName: sassName }
-}
-
-function getPercents() {
-	const pct = [2, 3, 4, 5, 6, 12]
-
-	let pcts = []
-	pct.map((d) => {
-		for (let it = 1; it < d; it++) {
-			if (it != d) {
-				pcts.push({
-					name: `${it}_${d}`,
-					val: (it / d * 100) % 1 == 0 ? it / d * 100 : it / d * 100,
-				})
-			}
-		}
-	})
-	pcts.push(...[
-		{ name: 'auto', val: 'auto' },
-		{ name: 'full', val: '100%' },
-		// {name: 'w-screen', val: '100vw'},
-		// {name: 'h-screen', val: '100vh'},
-	])
-
-	let sassNames = ''
-	pcts.map(d => {
-		sassNames += `,'${d.name}' `
-	})
-	sassNames = sassNames.substring(1)
-
-	return { Pcts: pcts, pctSassName: sassNames }
-}
-
-function useHook() { // useSizes
-	const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
-	const Percents = [2, 3, 4, 5, 6, 12, 'full', 'auto']
-	const Xls = ['3xs 10 12', '2xs 11 14', 'xs 12 16', 'mini 13 18', 'sm 14 20', 'md 15 22', 'base 16 24', 'lg 18 28', 'xl 20 28', '2xl 24 32', '3xl 30 36', '4xl 36 40', '5xl 48 0', '6xl 60 0', '7xl 72 0', '8xl 96 0', '9xl 128 0'].map(d => {
-
-		let [name, fontSize, lineHeight] = d.split(' ')
-		return {
-			name,
-			fontSize,
-			lineHeight
-		}
-	})
-
-	const { Pxs, pxsass, pxSassName } = getPxs()
-
-	const { Pcts, pctSassName } = getPercents()
-	// console.log(Pcts)
-	return {
-		Sizes: Pxs,
-		Percents: Pcts,
-		Xls,
-		Pxs,
-		Pcts,
-	}
-
-}
-
+function getPxs() {
+	const _Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
+	let Pxs = [{ name: 'px', px: 1 }]
+	_Sizes.map(d => {
+		let d5 = d * 5,
+			d10 = d * 10
+		if (d5 > 0 && d5 <= 40 && d5 % 5 == 0 && d5 % 10 != 0) {
+			Pxs.push({ name: d5, px: d * 2 })
+		}
+		Pxs.push({ name: d10, px: d * 4 })
+	})
+	Pxs = Pxs.sort((n1, n2) => n1.px - n2.px).map(d => {
+		d.name10 = d.name
+		if (d.name != 'px') {
+			let _name = d.name / 10
+			if (_name % 1 == 0) {
+				d.name = _name
+			} else {
+				d.name = `${_name}`.replace(/\./g, '-')
+			}
+			d._name = _name
+		}
+		return d
+	})
+	let sass = '',
+		sassName = ''
+	Pxs.map(d => {
+		sass += `,'${d.name}' ${d.px} `
+		sassName += `,'${d.name}' `
+	})
+	sass = sass.substring(1)
+	sassName = sassName.substring(1)
+
+	return { Pxs, pxsass: sass, pxSassName: sassName }
+}
+
+function getPercents() {
+	const pct = [2, 3, 4, 5, 6, 12]
+
+	let pcts = []
+	pct.map((d) => {
+		for (let it = 1; it < d; it++) {
+			if (it != d) {
+				pcts.push({
+					name: `${it}_${d}`,
+					val: (it / d * 100) % 1 == 0 ? it / d * 100 : it / d * 100,
+				})
+			}
+		}
+	})
+	pcts.push(...[
+		{ name: 'auto', val: 'auto' },
+		{ name: 'full', val: '100%' },
+		// {name: 'w-screen', val: '100vw'},
+		// {name: 'h-screen', val: '100vh'},
+	])
+
+	let sassNames = ''
+	pcts.map(d => {
+		sassNames += `,'${d.name}' `
+	})
+	sassNames = sassNames.substring(1)
+
+	return { Pcts: pcts, pctSassName: sassNames }
+}
+
+function useHook() { // useSizes
+	const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
+	const Percents = [2, 3, 4, 5, 6, 12, 'full', 'auto']
+	const Xls = ['3xs 10 12', '2xs 11 14', 'xs 12 16', 'mini 13 18', 'sm 14 20', 'md 15 22', 'base 16 24', 'lg 18 28', 'xl 20 28', '2xl 24 32', '3xl 30 36', '4xl 36 40', '5xl 48 0', '6xl 60 0', '7xl 72 0', '8xl 96 0', '9xl 128 0'].map(d => {
+
+		let [name, fontSize, lineHeight] = d.split(' ')
+		return {
+			name,
+			fontSize,
+			lineHeight
+		}
+	})
+
+	const { Pxs, pxsass, pxSassName } = getPxs()
+
+	const { Pcts, pctSassName } = getPercents()
+	// console.log(Pcts)
+	return {
+		Sizes: Pxs,
+		Percents: Pcts,
+		Xls,
+		Pxs,
+		Pcts,
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useSizing.js

@@ -1,28 +1,28 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-function useHook() { // useTypography
-	const { pxs, percents } = useVars()
-
-	const Width = {
-		title: 'Width',
-		classes: [
-			...getClasses(pxs, {
-				name: ['w-'],
-				value: ['width'],
-			}),
-			...getClasses(percents, {
-				name: ['w-'],
-				value: ['width'],
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Width = {
+		title: 'Width',
+		classes: [
+			...getClasses(pxs, {
+				name: ['w-'],
+				value: ['width'],
+			}),
+			...getClasses(percents, {
+				name: ['w-'],
+				value: ['width'],
 			}),
 			{name: 'w-screen', value: ['width: var(--w-screen)'], percent: '100vw'}
-		]
-	}
-
-
-
-	const Height = {
-		title: 'Height',
+		]
+	}
+
+
+
+	const Height = {
+		title: 'Height',
 		classes: [
 			...getClasses(pxs, {
 				name: ['h-'],
@@ -33,7 +33,7 @@ function useHook() { // useTypography
 				value: ['height'],
 			}),
 			{name: 'h-screen', value: ['height: var(--h-screen)'], percent: '100vh'}
-		]
+		]
 	}
 	
 	const MaxHeight = {
@@ -49,14 +49,14 @@ function useHook() { // useTypography
 			}),
 			{name: 'max-h-screen', value: ['max-height: var(--h-screen)'], percent: '100vh'}
 		]
-	} 
-
-	return {
-		Width,
+	} 
+
+	return {
+		Width,
 		Height,
-		MaxHeight
-	}
-
-}
-
+		MaxHeight
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useSpacing.js

@@ -1,53 +1,53 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-function useHook() { // useTypography
-	const { pxs, percents } = useVars()
-
-	const Padding = {
-		title: 'Padding',
-		classes: getClasses(pxs, {
-			// name: ['p-', 'px-', 'py-', 'ps-', 'pe-', 'pt-', 'pr-', 'pb-', 'pl-'],
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Padding = {
+		title: 'Padding',
+		classes: getClasses(pxs, {
+			// name: ['p-', 'px-', 'py-', 'ps-', 'pe-', 'pt-', 'pr-', 'pb-', 'pl-'],
 			// value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-inline-start', 'padding-inline-end', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
-			name: ['p-', 'px-', 'py-', 'pt-', 'pr-', 'pb-', 'pl-'],
-			value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
-		})
-	}
-
-	const Margin = {
-		title: 'Margin',
+			name: ['p-', 'px-', 'py-', 'pt-', 'pr-', 'pb-', 'pl-'],
+			value: ['padding', 'padding-left, padding-right', 'padding-top, padding-bottom', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+		})
+	}
+
+	const Margin = {
+		title: 'Margin',
 		classes: [
-			...getClasses(pxs, {
+			...getClasses(pxs, {
 				// name: ['m-', 'mx-', 'my-', 'ms-', 'me-', 'mt-', 'mr-', 'mb-', 'ml-'],
-				// value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-inline-start', 'margin-inline-end', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
-				name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
-				value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+				// value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-inline-start', 'margin-inline-end', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+				name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
+				value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
 			}),
 			...getClasses([{name: 'auto', value: 'auto'}], {
 				name: ['m-', 'mx-', 'my-', 'mt-', 'mr-', 'mb-', 'ml-'],
 				value: ['margin', 'margin-left, margin-right', 'margin-top, margin-bottom', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
 			})
-		]
+		]
 	}
-
-	const SpaceBetween = {
-		title: 'Space Between',
-		classes: [
-			...getClasses(pxs, {
-				name: ['space-x-', 'space-y-'],
-				value: ['margin-left', 'margin-top'],
+
+	const SpaceBetween = {
+		title: 'Space Between',
+		classes: [
+			...getClasses(pxs, {
+				name: ['space-x-', 'space-y-'],
+				value: ['margin-left', 'margin-top'],
 			}),
-			{name: 'space-x-reverse', value: ['--space-x-reverse: 1']},
-			{name: 'space-y-reverse', value: ['--space-y-reverse: 1']},
-		]
-	}
-
-	return {
-		Padding,
-		Margin,
-		SpaceBetween
-	}
-
-}
-
+			{name: 'space-x-reverse', value: ['--space-x-reverse: 1']},
+			{name: 'space-y-reverse', value: ['--space-y-reverse: 1']},
+		]
+	}
+
+	return {
+		Padding,
+		Margin,
+		SpaceBetween
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useTransforms.js

@@ -1,43 +1,43 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-
-
-function useHook() { // useTypography
-	const { pxs, percents } = useVars()
-
-	const Scale = {
-		title: 'Scale',
-		classes: getClasses('0, 50, 75, 90, 95, 100, 105, 110, 125, 150', {
-			name: ['scale-', 'scale-x-', 'scale-y-'],
-			value: [
-				d => [`transform: scale(${d.value / 100})`],
-				d => [`transform: scaleX(${d.value / 100})`],
-				d => [`transform: scaleY(${d.value / 100})`]
-			],
-		})
-	}
-
-
-	const Rotate = {
-		title: 'Rotate',
-		classes: getClasses('0, 1, 2, 3, 6, 12, 45, 90, 180', {
-			name: ['rotate-', '-rotate-'],
-			value: [
-				d => [`transform: rotate(${d.value}deg)`],
-				d => [`transform: rotate(${-d.value}deg)`]
-			],
-		})
-	}
-
-	const Translate = {
-		title: 'Translate',
-		classes: [
-			...getClasses(pxs, {
-				name: ['translate-x-', 'translate-y-'],
-				value: [
-					d => [`transform: translateX(${d.value})`],
-					d => [`transform: translateY(${d.value})`],
-				],
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+
+
+function useHook() { // useTypography
+	const { pxs, percents } = useVars()
+
+	const Scale = {
+		title: 'Scale',
+		classes: getClasses('0, 50, 75, 90, 95, 100, 105, 110, 125, 150', {
+			name: ['scale-', 'scale-x-', 'scale-y-'],
+			value: [
+				d => [`transform: scale(${d.value / 100})`],
+				d => [`transform: scaleX(${d.value / 100})`],
+				d => [`transform: scaleY(${d.value / 100})`]
+			],
+		})
+	}
+
+
+	const Rotate = {
+		title: 'Rotate',
+		classes: getClasses('0, 1, 2, 3, 6, 12, 45, 90, 180', {
+			name: ['rotate-', '-rotate-'],
+			value: [
+				d => [`transform: rotate(${d.value}deg)`],
+				d => [`transform: rotate(${-d.value}deg)`]
+			],
+		})
+	}
+
+	const Translate = {
+		title: 'Translate',
+		classes: [
+			...getClasses(pxs, {
+				name: ['translate-x-', 'translate-y-'],
+				value: [
+					d => [`transform: translateX(${d.value})`],
+					d => [`transform: translateY(${d.value})`],
+				],
 			}),
 			...getClasses(percents, {
 				name: ['translate-x-', 'translate-y-'],
@@ -45,38 +45,38 @@ function useHook() { // useTypography
 					d => [`transform: translateX(${d.value})`],
 					d => [`transform: translateY(${d.value})`],
 				],
-			})
-		]
-	}
-
-	const Skew = {
-		title: 'Skew',
-		classes: getClasses('0, 1, 2, 3, 6, 12', {
-			name: ['skew-x-', 'skew-y-'],
-			value: [
-				d => [`transform: skewX(${d.value}deg)`],
-				d => [`transform: skewy(${-d.value}deg)`]
-			],
-		})
-	}
-
-
-	const TransformOrigin = {
-		title: 'Transform Origin',
-		classes: getClasses('center, top, top-right: top right, right, bottom-right: bottom right, bottom, bottom-left: bottom left, left, top-left: top left', {
-			name: ['origin-'],
-			value: ['transform-origin'],
-		})
-	}
-
-	return {
-		Scale,
-		Rotate,
-		Translate,
-		Skew,
-		TransformOrigin
-	}
-
-}
-
+			})
+		]
+	}
+
+	const Skew = {
+		title: 'Skew',
+		classes: getClasses('0, 1, 2, 3, 6, 12', {
+			name: ['skew-x-', 'skew-y-'],
+			value: [
+				d => [`transform: skewX(${d.value}deg)`],
+				d => [`transform: skewy(${-d.value}deg)`]
+			],
+		})
+	}
+
+
+	const TransformOrigin = {
+		title: 'Transform Origin',
+		classes: getClasses('center, top, top-right: top right, right, bottom-right: bottom right, bottom, bottom-left: bottom left, left, top-left: top left', {
+			name: ['origin-'],
+			value: ['transform-origin'],
+		})
+	}
+
+	return {
+		Scale,
+		Rotate,
+		Translate,
+		Skew,
+		TransformOrigin
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useTransitionsAnimation.js

@@ -1,21 +1,21 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useTransitionsAnimation
-	const { colors, color } = useColor()
-	const { pxs, percents } = useVars()
-
-	const TransitionProperty = {
-		title: 'Transition Property',
-		classes: getClasses([
-			{ name: 'none', value: 'none' },
-			{ name: 'all', value: 'all' },
-			{ name: '', value: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter' },
-			{ name: 'colors', value: 'color, background-color, border-color, text-decoration-color, fill, stroke' },
-			{name: 'opacity', value: 'opacity'},
-			{name: 'shadow', value: 'box-shadow'},
-			{name: 'transform', value: 'transform'},
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useTransitionsAnimation
+	const { colors, color } = useColor()
+	const { pxs, percents } = useVars()
+
+	const TransitionProperty = {
+		title: 'Transition Property',
+		classes: getClasses([
+			{ name: 'none', value: 'none' },
+			{ name: 'all', value: 'all' },
+			{ name: '', value: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter' },
+			{ name: 'colors', value: 'color, background-color, border-color, text-decoration-color, fill, stroke' },
+			{name: 'opacity', value: 'opacity'},
+			{name: 'shadow', value: 'box-shadow'},
+			{name: 'transform', value: 'transform'},
 		], { name: 'transition-', value: ({name, value}) => {
 			if(name == 'none') {
 				return [ `transition-property: ${name};` ]
@@ -25,45 +25,45 @@ function useHook() { // useTransitionsAnimation
 				'transition-duration: 150ms;'
 			]
 			return [ `transition-property: ${value};`, ...custom ]
-		}, scss: 0 })
-	}
-	const TransitionDuration = {
-		title: 'Transition Duration',
-		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
-			return {
-				name: d,
-				value: `${d}${d > 0 ? 'ms' : 's'}`
-			}
-		}), { name: 'duration-', value: 'transition-duration', scss: 0 })
-	}
-	const TransitionTimingFunction = {
-		title: 'Transition Timing Function',
-		classes: getClasses([
-			{ name: 'linear', value: 'linear' },
-			{ name: 'in', value: 'cubic-bezier(0.4, 0, 1, 1)' },
-			{ name: 'out', value: 'cubic-bezier(0, 0, 0.2, 1)' },
-			{ name: 'in-out', value: 'cubic-bezier(0.4, 0, 0.2, 1)' },
-		], { name: 'ease-', value: 'transition-timing-function', scss: 0 })
-	}
-	const TransitionDelay = {
-		title: 'Transition Delay',
-		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
-			return {
-				name: d,
-				value: `${d}${d > 0 ? 'ms' : 's'}`
-			}
-		}), { name: 'delay-', value: 'transition-delay', scss: 0 })
-	}
-	const Animation = { title: 'Animation', classes: [] }
-
-	return {
-		TransitionProperty,
-		TransitionDuration,
-		TransitionTimingFunction,
-		TransitionDelay,
-		Animation
-	}
-
-}
-
+		}, scss: 0 })
+	}
+	const TransitionDuration = {
+		title: 'Transition Duration',
+		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
+			return {
+				name: d,
+				value: `${d}${d > 0 ? 'ms' : 's'}`
+			}
+		}), { name: 'duration-', value: 'transition-duration', scss: 0 })
+	}
+	const TransitionTimingFunction = {
+		title: 'Transition Timing Function',
+		classes: getClasses([
+			{ name: 'linear', value: 'linear' },
+			{ name: 'in', value: 'cubic-bezier(0.4, 0, 1, 1)' },
+			{ name: 'out', value: 'cubic-bezier(0, 0, 0.2, 1)' },
+			{ name: 'in-out', value: 'cubic-bezier(0.4, 0, 0.2, 1)' },
+		], { name: 'ease-', value: 'transition-timing-function', scss: 0 })
+	}
+	const TransitionDelay = {
+		title: 'Transition Delay',
+		classes: getClasses([0, 75, 100, 150, 200, 300, 500, 700, 1000].map(d => {
+			return {
+				name: d,
+				value: `${d}${d > 0 ? 'ms' : 's'}`
+			}
+		}), { name: 'delay-', value: 'transition-delay', scss: 0 })
+	}
+	const Animation = { title: 'Animation', classes: [] }
+
+	return {
+		TransitionProperty,
+		TransitionDuration,
+		TransitionTimingFunction,
+		TransitionDelay,
+		Animation
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useTypography.js

@@ -1,281 +1,281 @@
-import useVars from './useVars.js'
-import { getClasses } from '../utils/classes.js'
-import useColor from './useColor.js'
-
-function useHook() { // useTypography
-	const { colors, color } = useColor()
-	const { pxs, percents, xls } = useVars()
-
-	const FontFamily = {
-		title: 'Font Family',
-		classes: getClasses('sans, serif, mono', {
-			name: ['font-'],
-			value: [d => {
-				const fs = {
-					sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
-					serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
-					mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
-				}
-				return [`font-family: ${fs[d.value]};`]
-			}]
-		})
-	}
-
-	const FontSize = ({
-		title: 'Font Size',
-		classes: getClasses(xls, {
-			name: 'text-',
-			value: d => {
-				return [{ value: `font-size: ${d.value};`, rpx: d.fontSize * 2 }, { value: `line-height: ${d.lineHeightValue};`, desc: d.lineHeight > 0 ? `${d.lineHeight * 2}rpx` : 1 }]
-			}
-		}),
-	})
-	const FontSmoothing = { title: 'Font Smoothing', classes: [] }
-
-	const FontStyle = {
-		title: 'Font Style',
-		classes: getClasses([
-			{ name: 'italic', value: 'italic' },
-			{ name: 'not-italic', value: 'normal' },
-		], { name: '', value: 'font-style' })
-	}
-
-	const FontWeight = ({
-		title: 'Font Weight',
-		classes: getClasses('thin,extralight,light,normal,medium,semibold,bold,extrabold,black', {
-			name: 'font-',
-			value: (d, i) => {
-				return [`font-weight: ${(i + 1) * 100};`]
-			}
-		}),
-	})
-
-	const FontVariantNumeric = {
-		title: 'Font Variant Numeric',
-		classes: getClasses([
-			{ name: 'normal-nums', value: 'normal' },
-			{ name: 'ordinal', value: 'ordinal' },
-			{ name: 'slashed-zero', value: 'slashed-zero' },
-			{ name: 'lining-nums', value: 'lining-nums' },
-			{ name: 'oldstyle-nums', value: 'oldstyle-nums' },
-			{ name: 'proportional-nums', value: 'proportional-nums' },
-			{ name: 'tabular-nums', value: 'tabular-nums' },
-			{ name: 'diagonal-fractions', value: 'diagonal-fractions' },
-			{ name: 'stacked-fractions', value: 'stacked-fractions' },
-		], { name: '', value: 'font-variant-numeric' })
-	}
-	// 1em = 16px .1em = 16 * 0.1 = 1.6px = 3.2rpx
-	const LetterSpacing = {
-		title: 'Letter Spacing',
-		classes: getClasses([
-			{ name: 'tighter', value: '-0.05em', rpx: -16 * 2 * .05 },
-			{ name: 'tight', value: '-0.025em', rpx: -16 * 2 * .025 },
-			{ name: 'normal', value: '0em', rpx: 0 },
-			{ name: 'wide', value: '0.025em', rpx: 16 * 2 * .025 },
-			{ name: 'wider', value: '0.05em', rpx: 16 * 2 * .05 },
-			{ name: 'widest', value: '0.1em', rpx: 16 * 2 * .1 },
-		], { name: 'tracking-', value: 'letter-spacing' })
-	}
-	const LineClamp = {
-		title: 'Line Clamp',
-		classes: [
-			...new Array(6).fill(0).map((d, i) => {
-				return {
-					name: `line-clamp-${i + 1}`,
-					value: [
-						'overflow: hidden;',
-						'display: -webkit-box;',
-						'-webkit-box-orient: vertical;',
-						`-webkit-line-clamp: ${i + 1};`
-					]
-				}
-			}),
-			{
-				name: 'line-clamp-none',
-				value: [
-					'overflow: visible;',
-					'display: block;',
-					'-webkit-box-orient: horizontal;',
-					'-webkit-line-clamp: none;'
-				]
-			}
-		]
-	}
-
-	const LineHeight = {
-		title: 'Line Height',
-		classes: getClasses([
-			{ name: '3', value: '.75rem', rpx: 16 * 2 * .75 },
-			{ name: '4', value: '1rem', rpx: 16 * 2 * 1 },
-			{ name: '5', value: '1.25rem', rpx: 16 * 2 * 1.25 },
-			{ name: '6', value: '1.5rem', rpx: 16 * 2 * 1.5 },
-			{ name: '7', value: '1.75rem', rpx: 16 * 2 * 1.75 },
-			{ name: '8', value: '2rem', rpx: 16 * 2 * 2 },
-			{ name: '9', value: '2.25rem', rpx: 16 * 2 * 2.25 },
-			{ name: '10', value: '2.5rem', rpx: 16 * 2 * 2.5 },
-			{ name: 'none', value: '1' },
-			{ name: 'tight', value: '1.25' },
-			{ name: 'snug', value: '1.375' },
-			{ name: 'normal', value: '1.5' },
-			{ name: 'relaxed', value: '1.625' },
-			{ name: 'loose', value: '2' },
-		], { name: 'leading-', value: 'line-height' })
-	}
-	const ListStyleImage = { title: 'List StyleImage', classes: [] }
-	const ListStylePosition = { title: 'List StylePosition', classes: [] }
-	const ListStyleType = { title: 'List StyleType', classes: [] }
-
-	const TextAlign = ({
-		title: 'Text Align',
-		classes: getClasses('left,center,right,justify,start,end', { name: 'text-', value: 'text-align' }),
-	})
-	const TextColor = {
-		title: 'Text Color',
-		classes: color.map(c => {
-			return {
-				...c,
-				name: `text-${c.name}`,
-				value: [`color: ${c.value};`],
-				textcolor: c.color,
-				desc: c.rgb,
-			}
-		})
-	}
-
-	const TextDecoration = {
-		title: 'Text Decoration',
-		classes: getClasses([
-			{ name: 'underline', value: 'underline' },
-			{ name: 'overline', value: 'overline' },
-			{ name: 'line-through', value: 'line-through' },
-			{ name: 'no-underline', value: 'none' },
-		], { name: '', value: 'text-decoration-line' })
-	}
-	const TextDecorationColor = {
-		title: 'Text DecorationColor',
-		classes: color.map(c => {
-			return {
-				...c,
-				name: `decoration-${c.name}`,
-				value: [`color: ${c.value};`],
-				// textcolor: c.color,
-				desc: c.rgb,
-			}
-		})
-	}
-	const TextDecorationStyle = {
-		title: 'Text DecorationStyle',
-		classes: getClasses('solid, double, dotted, dashed, wavy', { name: 'decoration-', value: 'text-decoration-style' })
-	}
-	const TextDecorationThickness = {
-		title: 'Text Decoration Thickness',
-		classes: getClasses([
-			{ name: 'auto', value: 'auto' },
-			{ name: 'from-font', value: 'from-font' },
-			{ name: '0', value: '0' },
-			{ name: '1', value: `${1 * 2}rpx` },
-			{ name: '2', value: `${2 * 2}rpx` },
-			{ name: '4', value: `${4 * 2}rpx` },
-			{ name: '8', value: `${8 * 2}rpx` },
-		], { name: 'decoration-', value: 'text-decoration-thickness', scss: 0 })
-	}
-	const TextUnderlineOffset = {
-		title: 'Text Underline Offset',
-		classes: getClasses([
-			{ name: 'auto', value: 'auto' },
-			{ name: '0', value: '0' },
-			{ name: '1', value: `${1 * 2}rpx` },
-			{ name: '2', value: `${2 * 2}rpx` },
-			{ name: '4', value: `${4 * 2}rpx` },
-			{ name: '8', value: `${8 * 2}rpx` },
-		], { name: 'underline-offset-', value: 'text-underline-offset', scss: 0 })
-	}
-	const TextTransform = {
-		title: 'Text Transform',
-		classes: getClasses([
-			{ name: 'uppercase', value: 'uppercase' },
-			{ name: 'lowercase', value: 'lowercase' },
-			{ name: 'capitalize', value: 'capitalize' },
-			{ name: 'normal-case', value: 'none' },
-		], { name: '', value: 'text-transform', scss: 0 })
-	}
-	const TextOverflow = {
-		title: 'Text Overflow',
-		classes: [{
-				name: 'truncate',
-				value: ['overflow: hidden;',
-					'text-overflow: ellipsis;',
-					'white-space: nowrap;'
-				]
-			},
-			{ name: 'text-ellipsis', value: ['text-overflow: ellipsis;'] },
-			{ name: 'text-clip', value: ['text-overflow: clip;'] },
-		]
-	}
-	const TextIndent = {
-		title: 'Text Indent',
-		classes: getClasses(pxs, {
-			name: ['indent-'],
-			value: ['text-indent'],
-		})
-	}
-	const VerticalAlign = {
-		title: 'Vertical Align',
-		classes: getClasses([
-			{ name: 'baseline', value: 'baseline' },
-			{ name: 'top', value: 'top' },
-			{ name: 'middle', value: 'middle' },
-			{ name: 'bottom', value: 'bottom' },
-			{ name: 'text-top', value: 'text-top' },
-			{ name: 'text-bottom', value: 'text-bottom' },
-			{ name: 'sub', value: 'sub' },
-			{ name: 'super', value: 'super' },
-		], { name: 'align-', value: 'vertical-align', scss: 0 })
-	}
-	const Whitespace = { title: 'Whitespace', classes: getClasses(`normal, nowrap, pre, pre-line, pre-wrap, break-spaces`, { name: 'whitespace-', value: 'white-space', scss: 0 }) }
-	const WordBreak = {
-		title: 'WordBreak',
+import useVars from './useVars.js'
+import { getClasses } from '../utils/classes.js'
+import useColor from './useColor.js'
+
+function useHook() { // useTypography
+	const { colors, color } = useColor()
+	const { pxs, percents, xls } = useVars()
+
+	const FontFamily = {
+		title: 'Font Family',
+		classes: getClasses('sans, serif, mono', {
+			name: ['font-'],
+			value: [d => {
+				const fs = {
+					sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+					serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
+					mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
+				}
+				return [`font-family: ${fs[d.value]};`]
+			}]
+		})
+	}
+
+	const FontSize = ({
+		title: 'Font Size',
+		classes: getClasses(xls, {
+			name: 'text-',
+			value: d => {
+				return [{ value: `font-size: ${d.value};`, rpx: d.fontSize * 2 }, { value: `line-height: ${d.lineHeightValue};`, desc: d.lineHeight > 0 ? `${d.lineHeight * 2}rpx` : 1 }]
+			}
+		}),
+	})
+	const FontSmoothing = { title: 'Font Smoothing', classes: [] }
+
+	const FontStyle = {
+		title: 'Font Style',
+		classes: getClasses([
+			{ name: 'italic', value: 'italic' },
+			{ name: 'not-italic', value: 'normal' },
+		], { name: '', value: 'font-style' })
+	}
+
+	const FontWeight = ({
+		title: 'Font Weight',
+		classes: getClasses('thin,extralight,light,normal,medium,semibold,bold,extrabold,black', {
+			name: 'font-',
+			value: (d, i) => {
+				return [`font-weight: ${(i + 1) * 100};`]
+			}
+		}),
+	})
+
+	const FontVariantNumeric = {
+		title: 'Font Variant Numeric',
+		classes: getClasses([
+			{ name: 'normal-nums', value: 'normal' },
+			{ name: 'ordinal', value: 'ordinal' },
+			{ name: 'slashed-zero', value: 'slashed-zero' },
+			{ name: 'lining-nums', value: 'lining-nums' },
+			{ name: 'oldstyle-nums', value: 'oldstyle-nums' },
+			{ name: 'proportional-nums', value: 'proportional-nums' },
+			{ name: 'tabular-nums', value: 'tabular-nums' },
+			{ name: 'diagonal-fractions', value: 'diagonal-fractions' },
+			{ name: 'stacked-fractions', value: 'stacked-fractions' },
+		], { name: '', value: 'font-variant-numeric' })
+	}
+	// 1em = 16px .1em = 16 * 0.1 = 1.6px = 3.2rpx
+	const LetterSpacing = {
+		title: 'Letter Spacing',
+		classes: getClasses([
+			{ name: 'tighter', value: '-0.05em', rpx: -16 * 2 * .05 },
+			{ name: 'tight', value: '-0.025em', rpx: -16 * 2 * .025 },
+			{ name: 'normal', value: '0em', rpx: 0 },
+			{ name: 'wide', value: '0.025em', rpx: 16 * 2 * .025 },
+			{ name: 'wider', value: '0.05em', rpx: 16 * 2 * .05 },
+			{ name: 'widest', value: '0.1em', rpx: 16 * 2 * .1 },
+		], { name: 'tracking-', value: 'letter-spacing' })
+	}
+	const LineClamp = {
+		title: 'Line Clamp',
+		classes: [
+			...new Array(6).fill(0).map((d, i) => {
+				return {
+					name: `line-clamp-${i + 1}`,
+					value: [
+						'overflow: hidden;',
+						'display: -webkit-box;',
+						'-webkit-box-orient: vertical;',
+						`-webkit-line-clamp: ${i + 1};`
+					]
+				}
+			}),
+			{
+				name: 'line-clamp-none',
+				value: [
+					'overflow: visible;',
+					'display: block;',
+					'-webkit-box-orient: horizontal;',
+					'-webkit-line-clamp: none;'
+				]
+			}
+		]
+	}
+
+	const LineHeight = {
+		title: 'Line Height',
+		classes: getClasses([
+			{ name: '3', value: '.75rem', rpx: 16 * 2 * .75 },
+			{ name: '4', value: '1rem', rpx: 16 * 2 * 1 },
+			{ name: '5', value: '1.25rem', rpx: 16 * 2 * 1.25 },
+			{ name: '6', value: '1.5rem', rpx: 16 * 2 * 1.5 },
+			{ name: '7', value: '1.75rem', rpx: 16 * 2 * 1.75 },
+			{ name: '8', value: '2rem', rpx: 16 * 2 * 2 },
+			{ name: '9', value: '2.25rem', rpx: 16 * 2 * 2.25 },
+			{ name: '10', value: '2.5rem', rpx: 16 * 2 * 2.5 },
+			{ name: 'none', value: '1' },
+			{ name: 'tight', value: '1.25' },
+			{ name: 'snug', value: '1.375' },
+			{ name: 'normal', value: '1.5' },
+			{ name: 'relaxed', value: '1.625' },
+			{ name: 'loose', value: '2' },
+		], { name: 'leading-', value: 'line-height' })
+	}
+	const ListStyleImage = { title: 'List StyleImage', classes: [] }
+	const ListStylePosition = { title: 'List StylePosition', classes: [] }
+	const ListStyleType = { title: 'List StyleType', classes: [] }
+
+	const TextAlign = ({
+		title: 'Text Align',
+		classes: getClasses('left,center,right,justify,start,end', { name: 'text-', value: 'text-align' }),
+	})
+	const TextColor = {
+		title: 'Text Color',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `text-${c.name}`,
+				value: [`color: ${c.value};`],
+				textcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+
+	const TextDecoration = {
+		title: 'Text Decoration',
+		classes: getClasses([
+			{ name: 'underline', value: 'underline' },
+			{ name: 'overline', value: 'overline' },
+			{ name: 'line-through', value: 'line-through' },
+			{ name: 'no-underline', value: 'none' },
+		], { name: '', value: 'text-decoration-line' })
+	}
+	const TextDecorationColor = {
+		title: 'Text DecorationColor',
+		classes: color.map(c => {
+			return {
+				...c,
+				name: `decoration-${c.name}`,
+				value: [`color: ${c.value};`],
+				// textcolor: c.color,
+				desc: c.rgb,
+			}
+		})
+	}
+	const TextDecorationStyle = {
+		title: 'Text DecorationStyle',
+		classes: getClasses('solid, double, dotted, dashed, wavy', { name: 'decoration-', value: 'text-decoration-style' })
+	}
+	const TextDecorationThickness = {
+		title: 'Text Decoration Thickness',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: 'from-font', value: 'from-font' },
+			{ name: '0', value: '0' },
+			{ name: '1', value: `${1 * 2}rpx` },
+			{ name: '2', value: `${2 * 2}rpx` },
+			{ name: '4', value: `${4 * 2}rpx` },
+			{ name: '8', value: `${8 * 2}rpx` },
+		], { name: 'decoration-', value: 'text-decoration-thickness', scss: 0 })
+	}
+	const TextUnderlineOffset = {
+		title: 'Text Underline Offset',
+		classes: getClasses([
+			{ name: 'auto', value: 'auto' },
+			{ name: '0', value: '0' },
+			{ name: '1', value: `${1 * 2}rpx` },
+			{ name: '2', value: `${2 * 2}rpx` },
+			{ name: '4', value: `${4 * 2}rpx` },
+			{ name: '8', value: `${8 * 2}rpx` },
+		], { name: 'underline-offset-', value: 'text-underline-offset', scss: 0 })
+	}
+	const TextTransform = {
+		title: 'Text Transform',
+		classes: getClasses([
+			{ name: 'uppercase', value: 'uppercase' },
+			{ name: 'lowercase', value: 'lowercase' },
+			{ name: 'capitalize', value: 'capitalize' },
+			{ name: 'normal-case', value: 'none' },
+		], { name: '', value: 'text-transform', scss: 0 })
+	}
+	const TextOverflow = {
+		title: 'Text Overflow',
+		classes: [{
+				name: 'truncate',
+				value: ['overflow: hidden;',
+					'text-overflow: ellipsis;',
+					'white-space: nowrap;'
+				]
+			},
+			{ name: 'text-ellipsis', value: ['text-overflow: ellipsis;'] },
+			{ name: 'text-clip', value: ['text-overflow: clip;'] },
+		]
+	}
+	const TextIndent = {
+		title: 'Text Indent',
+		classes: getClasses(pxs, {
+			name: ['indent-'],
+			value: ['text-indent'],
+		})
+	}
+	const VerticalAlign = {
+		title: 'Vertical Align',
+		classes: getClasses([
+			{ name: 'baseline', value: 'baseline' },
+			{ name: 'top', value: 'top' },
+			{ name: 'middle', value: 'middle' },
+			{ name: 'bottom', value: 'bottom' },
+			{ name: 'text-top', value: 'text-top' },
+			{ name: 'text-bottom', value: 'text-bottom' },
+			{ name: 'sub', value: 'sub' },
+			{ name: 'super', value: 'super' },
+		], { name: 'align-', value: 'vertical-align', scss: 0 })
+	}
+	const Whitespace = { title: 'Whitespace', classes: getClasses(`normal, nowrap, pre, pre-line, pre-wrap, break-spaces`, { name: 'whitespace-', value: 'white-space', scss: 0 }) }
+	const WordBreak = {
+		title: 'WordBreak',
 		classes: [
 			{name: 'break-normal', value: ['overflow-wrap: normal;', 'word-break: normal;']},
 			{name: 'break-words', value: ['overflow-wrap: break-word;']},
 			{name: 'break-all', value: ['word-break: break-all;']},
 			{name: 'break-keep', value: ['word-break: keep-all;']},
-		]
-	}
-	const Hyphens = { title: 'Hyphens', classes: getClasses(`none, manual, auto`, { name: 'hyphens-', value: 'hyphens', scss: 0 }) }
-	const Content = { title: 'Content', classes: getClasses(`none`, { name: 'content-', value: 'content', scss: 0 }) }
-
-
-	return {
-		FontFamily,
-		FontSize,
-		FontSmoothing,
-		FontStyle,
-		FontWeight,
-		FontVariantNumeric,
-		LetterSpacing,
-		LineClamp,
-		LineHeight,
-		ListStyleImage,
-		ListStylePosition,
-		ListStyleType,
-		TextAlign,
-		TextColor,
-		TextDecoration,
-		TextDecorationColor,
-		TextDecorationStyle,
-		TextDecorationThickness,
-		TextUnderlineOffset,
-		TextTransform,
-		TextOverflow,
-		TextIndent,
-		VerticalAlign,
-		Whitespace,
-		WordBreak,
-		Hyphens,
-		Content
-	}
-
-}
-
+		]
+	}
+	const Hyphens = { title: 'Hyphens', classes: getClasses(`none, manual, auto`, { name: 'hyphens-', value: 'hyphens', scss: 0 }) }
+	const Content = { title: 'Content', classes: getClasses(`none`, { name: 'content-', value: 'content', scss: 0 }) }
+
+
+	return {
+		FontFamily,
+		FontSize,
+		FontSmoothing,
+		FontStyle,
+		FontWeight,
+		FontVariantNumeric,
+		LetterSpacing,
+		LineClamp,
+		LineHeight,
+		ListStyleImage,
+		ListStylePosition,
+		ListStyleType,
+		TextAlign,
+		TextColor,
+		TextDecoration,
+		TextDecorationColor,
+		TextDecorationStyle,
+		TextDecorationThickness,
+		TextUnderlineOffset,
+		TextTransform,
+		TextOverflow,
+		TextIndent,
+		VerticalAlign,
+		Whitespace,
+		WordBreak,
+		Hyphens,
+		Content
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/hooks/useVars.js

@@ -1,6 +1,6 @@
-import useSizes from './useSizes.js'
-
-function useHook() { // 
+import useSizes from './useSizes.js'
+
+function useHook() { // 
 	const { Pxs, Pcts, Xls } = useSizes()
 	const pxs = Pxs.map(p => {
 		return {
@@ -9,7 +9,7 @@ function useHook() { //
 			px: p.px,
 			rpx: p.px == 1 ? 1 : p.px * 2
 		}
-	})
+	})
 	const percents = Pcts.map(p => {
 		return {
 			name: p.name,
@@ -31,7 +31,7 @@ function useHook() { //
 			lineHeightValue: `var(--text-${d.name}-lineHeight)`,
 			rpx: `${d.fontSize * 2}rpx`,
 		}
-	})
+	})
 
 	// 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95
 	let opacitys = []
@@ -49,11 +49,11 @@ function useHook() { //
 	// 		calc: 'calc(50 / 100)',
 	// 		opacity: 50 / 100,
 	// 	}
-	// ]
-	return {
-		pxs, percents, border_radius: borderRadius, xls, opacitys
-	}
-
-}
-
+	// ]
+	return {
+		pxs, percents, border_radius: borderRadius, xls, opacitys
+	}
+
+}
+
 export default useHook

uni_modules/jc-tailwind/index.js

@@ -1,9 +1,9 @@
-function install(Vue) {
-	// #ifdef VUE3
-	Vue.config.globalProperties.$t = {}
-	// #endif
-}
-
-export default {
-	install
+function install(Vue) {
+	// #ifdef VUE3
+	Vue.config.globalProperties.$t = {}
+	// #endif
+}
+
+export default {
+	install
 }

uni_modules/jc-tailwind/package.json

@@ -1,80 +1,80 @@
-{
-	"id": "jc-tailwind",
-	"name": "jc-tailwind",
-	"displayName": "tailwind 纯css版",
-	"version": "0.4.6",
-	"description": "tailwind 整合到小程序 支持 Vue3.0",
-	"keywords": [
-        "Tailwind",
-        "vue3.0",
-        "uniapp"
-    ],
-	"repository": "",
-	"engines": {
-		"HBuilderX": "^3.7.9"
-	},
-	"dcloudext": {
-		"sale": {
-			"regular": {
-				"price": "0.00"
-			},
-			"sourcecode": {
-				"price": "0.00"
-			}
-		},
-		"contact": {
-			"qq": ""
-		},
-		"declaration": {
-			"ads": "无",
-			"data": "插件不采集任何数据",
-			"permissions": "无"
-		},
-		"npmurl": "",
-		"type": "component-vue"
-	},
-	"uni_modules": {
-		"dependencies": [],
-		"encrypt": [],
-		"platforms": {
-			"cloud": {
-				"tcb": "y",
-				"aliyun": "y"
-			},
-			"client": {
-				"Vue": {
-					"vue2": "y",
-					"vue3": "y"
-				},
-				"App": {
-					"app-vue": "u",
-					"app-nvue": "u"
-				},
-				"H5-mobile": {
-					"Safari": "y",
-					"Android Browser": "y",
-					"微信浏览器(Android)": "y",
-					"QQ浏览器(Android)": "y"
-				},
-				"H5-pc": {
-					"Chrome": "y",
-					"IE": "u",
-					"Edge": "y",
-					"Firefox": "y",
-					"Safari": "y"
-				},
-				"小程序": {
-					"微信": "y",
-					"阿里": "u",
-					"百度": "u",
-					"字节跳动": "u",
-					"QQ": "u"
-				},
-				"快应用": {
-					"华为": "u",
-					"联盟": "u"
-				}
-			}
-		}
-	}
+{
+	"id": "jc-tailwind",
+	"name": "jc-tailwind",
+	"displayName": "tailwind 纯css版",
+	"version": "0.4.6",
+	"description": "tailwind 整合到小程序 支持 Vue3.0",
+	"keywords": [
+        "Tailwind",
+        "vue3.0",
+        "uniapp"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.7.9"
+	},
+	"dcloudext": {
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "插件不采集任何数据",
+			"permissions": "无"
+		},
+		"npmurl": "",
+		"type": "component-vue"
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "u",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "u",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
 }

uni_modules/jc-tailwind/reset.scss

@@ -1,12 +1,12 @@
-/* #ifndef APP-NVUE */
-// 在weex，也即nvue中，所有元素默认为border-box
-view, text { box-sizing: border-box; }
+/* #ifndef APP-NVUE */
+// 在weex，也即nvue中，所有元素默认为border-box
+view, text { box-sizing: border-box; }
 /* #endif */
 
-image {
-	display: inline-block;
-	// 解决图片加载时可能会瞬间变形的问题
-	will-change: transform;
+image {
+	display: inline-block;
+	// 解决图片加载时可能会瞬间变形的问题
+	will-change: transform;
 }
 
 page {

uni_modules/jc-tailwind/scss/FlexboxGrid/GridColumnStartEnd.scss

@@ -3,9 +3,9 @@
 @for $i from 1 through 13 {
 	@if($i < 13) {
 		.col-span-#{$i} {grid-column: span #{$i} / span #{$i};}
-	}
-	.col-start-#{$i} {grid-column-start: #{$i};}
-	.col-end-#{$i} {grid-column-end: #{$i};}
+	}
+	.col-start-#{$i} {grid-column-start: #{$i};}
+	.col-end-#{$i} {grid-column-end: #{$i};}
 }
 .col-span-full {grid-column: 1 / -1;}
 .col-start-auto {grid-column-start: auto;}

uni_modules/jc-tailwind/scss/FlexboxGrid/GridRowStartEnd.scss

@@ -3,9 +3,9 @@
 @for $i from 1 through 7 {
 	@if($i < 7) {
 		.row-span-#{$i} {grid-row: span #{$i} / span #{$i};}
-	}
-	.row-start-#{$i} {grid-row-start: #{$i};}
-	.row-end-#{$i} {grid-row-end: #{$i};}
+	}
+	.row-start-#{$i} {grid-row-start: #{$i};}
+	.row-end-#{$i} {grid-row-end: #{$i};}
 }
 .row-span-full {grid-row: 1 / -1;}
 .row-start-auto {grid-row-start: auto;}

uni_modules/jc-tailwind/scss/FlexboxGrid/GridTemplateColumns.scss

@@ -1,5 +1,5 @@
 // Grid Template Columns
-@for $i from 1 through 12 {
-	.grid-cols-#{$i} {grid-template-columns: repeat(#{$i}, minmax(0, 1fr));}
+@for $i from 1 through 12 {
+	.grid-cols-#{$i} {grid-template-columns: repeat(#{$i}, minmax(0, 1fr));}
 }
 .grid-cols-none {grid-template-columns: none;}

uni_modules/jc-tailwind/scss/FlexboxGrid/GridTemplateRows.scss

@@ -1,5 +1,5 @@
 // Grid Template Rows
-@for $i from 1 through 6 {
-	.grid-rows-#{$i} {grid-template-rows: repeat(#{$i}, minmax(0, 1fr));}
+@for $i from 1 through 6 {
+	.grid-rows-#{$i} {grid-template-rows: repeat(#{$i}, minmax(0, 1fr));}
 }
 .grid-rows-none {grid-template-rows: none;}

uni_modules/jc-tailwind/scss/FlexboxGrid/Order.scss

@@ -1,6 +1,6 @@
 // Order
-@for $i from 1 through 12 {
-	.order-#{$i} {order: #{$i};}
+@for $i from 1 through 12 {
+	.order-#{$i} {order: #{$i};}
 }
 .order-first {order: -9999;}
 .order-last {order: 9999;}

uni_modules/jc-tailwind/scss/Typography/Font.scss

@@ -40,7 +40,7 @@ $fontStyles: italic italic, not-italic normal;
 
 // Font Variant Numeric
 $fontVariantNumerics: 'normal-nums' 'normal','ordinal' 'ordinal','slashed-zero' 'slashed-zero','lining-nums' 'lining-nums','oldstyle-nums' 'oldstyle-nums','proportional-nums' 'proportional-nums','tabular-nums' 'tabular-nums','diagonal-fractions' 'diagonal-fractions','stacked-fractions' 'stacked-fractions';
-
+
 @each $name, $val in $fontVariantNumerics {
 	.#{$name} {font-variant-numeric: #{$val};}
 }

uni_modules/jc-tailwind/scss/Typography/LetterSpacing.scss

@@ -1,6 +1,6 @@
 // Letter Spacing
 $letterSpacings: 'tracking-tighter' '-0.05em','tracking-tight' '-0.025em','tracking-normal' '0em','tracking-wide' '0.025em','tracking-wider' '0.05em','tracking-widest' '0.1em';
-
+
 @each $name, $val in $letterSpacings {
 	.#{$name} {letter-spacing: #{$val};}
 }

uni_modules/jc-tailwind/scss/Typography/Line.scss

@@ -16,7 +16,7 @@
 
 // Line Height
 $lineHeights: 'leading-3' '.75rem','leading-4' '1rem','leading-5' '1.25rem','leading-6' '1.5rem','leading-7' '1.75rem','leading-8' '2rem','leading-9' '2.25rem','leading-10' '2.5rem','leading-none' '1','leading-tight' '1.25','leading-snug' '1.375','leading-normal' '1.5','leading-relaxed' '1.625','leading-loose' '2';
-
+
 @each $name, $val in $lineHeights {
 	.#{$name} {line-height: #{$val};}
 }

uni_modules/jc-tailwind/utils/classes.js

@@ -1,66 +1,66 @@
-export function getClassObject(list, { name, value }) {
+export function getClassObject(list, { name, value }) {
 	return list.map((d, i) => {
-		const values = typeof value === 'string' ? value.split(',').map(v => {
-			return `${v}: ${d.value || d.name};`
-		}) : [...value(d, i)]
-
-		return {
-			...d,
-			name: d.name !== '' ? `${name}${d.name}` : `${name.slice(0, name.lastIndexOf('-'))}`,
-			value: values
-		}
-	})
-}
-
-
-export function getClassArray(list, options) {
-	const { name, value } = options
-	if ('string' !== typeof name) {
-		return name.reduce((acc, cur, index) => {
-			if (acc) {
-				acc.push(...getClassObject(list, { name: cur, value: value[index] }))
-				return acc
-			}
-		}, [])
-	}
-	return getClassObject(list, { name, value })
-}
-
-export function getStringList(list) {
-	return list.split(',').map(d => {
-		d = d.trim()
-		const [name, value = d] = d.split(':')
-		return { name, value }
-	})
-}
-
-export function getClasses(list, options) {
-	if ('string' === typeof list) {
-		list = getStringList(list)
-	}
-
-	const result = getClassArray(list, options)
-
-	// console.log(result, options);
-	if (options?.scss) { // 生成scss
-		createNameValueScss(result, options, list)
-	}
-	return result
-
-
-}
-
-// 驼峰法
-function getCamelCaseName(str) {
-	if (typeof str !== 'string') return ''
-	let words = str.split('-')
-	for (let i = 1; i < words.length; i++) {
-		words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1)
-	}
-	return words.join('')
-}
-
-function createNameValueScss(list, { name, value, scss }, _list) {
+		const values = typeof value === 'string' ? value.split(',').map(v => {
+			return `${v}: ${d.value || d.name};`
+		}) : [...value(d, i)]
+
+		return {
+			...d,
+			name: d.name !== '' ? `${name}${d.name}` : `${name.slice(0, name.lastIndexOf('-'))}`,
+			value: values
+		}
+	})
+}
+
+
+export function getClassArray(list, options) {
+	const { name, value } = options
+	if ('string' !== typeof name) {
+		return name.reduce((acc, cur, index) => {
+			if (acc) {
+				acc.push(...getClassObject(list, { name: cur, value: value[index] }))
+				return acc
+			}
+		}, [])
+	}
+	return getClassObject(list, { name, value })
+}
+
+export function getStringList(list) {
+	return list.split(',').map(d => {
+		d = d.trim()
+		const [name, value = d] = d.split(':')
+		return { name, value }
+	})
+}
+
+export function getClasses(list, options) {
+	if ('string' === typeof list) {
+		list = getStringList(list)
+	}
+
+	const result = getClassArray(list, options)
+
+	// console.log(result, options);
+	if (options?.scss) { // 生成scss
+		createNameValueScss(result, options, list)
+	}
+	return result
+
+
+}
+
+// 驼峰法
+function getCamelCaseName(str) {
+	if (typeof str !== 'string') return ''
+	let words = str.split('-')
+	for (let i = 1; i < words.length; i++) {
+		words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1)
+	}
+	return words.join('')
+}
+
+function createNameValueScss(list, { name, value, scss }, _list) {
 	if (typeof value !== 'string') {
 		let strs = []
 		list.map(d => {
@@ -69,25 +69,25 @@ function createNameValueScss(list, { name, value, scss }, _list) {
 			strs.push(`${className}${classValue} }\n`)
 		})
 		return console.log(`%c${strs.join('\r')}`, 'color: skyblue;')
-	}
-
-
-	const camelCaseName = getCamelCaseName(value)
-
-	let arrValues = []
-	_list.map(d => {
-		arrValues.push(`'${name}${d.name}' '${d.value}'`)
+	}
+
+
+	const camelCaseName = getCamelCaseName(value)
+
+	let arrValues = []
+	_list.map(d => {
+		arrValues.push(`'${name}${d.name}' '${d.value}'`)
 	})
-	const arrName = `$${camelCaseName}s`
-	const arrs = `${arrName}: ${arrValues.join(',')}`
-	let str = `
-// ${camelCaseName}
-\r
-${arrs};
-\r
-@each $name, $val in ${arrName} {
-	.#{$name} {${value}: #{$val};}
-}
-		`
-	console.log(`%c${str}`, 'color: skyblue;')
+	const arrName = `$${camelCaseName}s`
+	const arrs = `${arrName}: ${arrValues.join(',')}`
+	let str = `
+// ${camelCaseName}
+\r
+${arrs};
+\r
+@each $name, $val in ${arrName} {
+	.#{$name} {${value}: #{$val};}
+}
+		`
+	console.log(`%c${str}`, 'color: skyblue;')
 }

uni_modules/jc-tailwind/utils/color.js

@@ -1,32 +1,32 @@
-/**
- * 求两个颜色之间的渐变值
- * @param {string} startColor 开始的颜色
- * @param {string} endColor 结束的颜色
- * @param {number} step 颜色等分的份额
- * */
-export function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
-	let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式
-	let startR = startRGB[0];
-	let startG = startRGB[1];
-	let startB = startRGB[2];
-
-	let endRGB = hexToRgb(endColor, false);
-	let endR = endRGB[0];
-	let endG = endRGB[1];
-	let endB = endRGB[2];
-
-	let sR = (endR - startR) / step; //总差值
-	let sG = (endG - startG) / step;
-	let sB = (endB - startB) / step;
-	let colorArr = [];
-	for (let i = 0; i < step; i++) {
-		//计算每一步的hex值 
-		let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *
-			i + startB)) + ')');
-		colorArr.push(hex);
-	}
-	return colorArr;
-}
+/**
+ * 求两个颜色之间的渐变值
+ * @param {string} startColor 开始的颜色
+ * @param {string} endColor 结束的颜色
+ * @param {number} step 颜色等分的份额
+ * */
+export function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
+	let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式
+	let startR = startRGB[0];
+	let startG = startRGB[1];
+	let startB = startRGB[2];
+
+	let endRGB = hexToRgb(endColor, false);
+	let endR = endRGB[0];
+	let endG = endRGB[1];
+	let endB = endRGB[2];
+
+	let sR = (endR - startR) / step; //总差值
+	let sG = (endG - startG) / step;
+	let sB = (endB - startB) / step;
+	let colorArr = [];
+	for (let i = 0; i < step; i++) {
+		//计算每一步的hex值 
+		let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *
+			i + startB)) + ')');
+		colorArr.push(hex);
+	}
+	return colorArr;
+}
 
 export function hexToRgbAlpha(sColor, str = true) {
 	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
@@ -55,101 +55,101 @@ export function hexToRgbAlpha(sColor, str = true) {
 	} else {
 		return sColor;
 	}
-}
-// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
-export function hexToRgb(sColor, str = true) {
-	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-	sColor = sColor.toLowerCase();
-	if (sColor && reg.test(sColor)) {
-		if (sColor.length === 4) {
-			let sColorNew = "#";
-			for (let i = 1; i < 4; i += 1) {
-				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
-			}
-			sColor = sColorNew;
-		}
-		//处理六位的颜色值
-		let sColorChange = [];
-		for (let i = 1; i < 7; i += 2) {
-			sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
-		}
-		if(!str) {
-			return sColorChange;
-		} else {
-			return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
-		}
-	} else if (/^(rgb|RGB)/.test(sColor)) {
-		let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
-		return arr.map(val => Number(val));
-	} else {
-		return sColor;
-	}
-};
-
-// 将rgb表示方式转换为hex表示方式
-export function rgbToHex(rgb) {
-	let _this = rgb;
-	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-	if (/^(rgb|RGB)/.test(_this)) {
-		let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
-		let strHex = "#";
-		for (let i = 0; i < aColor.length; i++) {
-			let hex = Number(aColor[i]).toString(16);
-			hex = String(hex).length == 1 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
-			if (hex === "0") {
-				hex += hex;
-			}
-			strHex += hex;
-		}
-		if (strHex.length !== 7) {
-			strHex = _this;
-		}
-		return strHex;
-	} else if (reg.test(_this)) {
-		let aNum = _this.replace(/#/, "").split("");
-		if (aNum.length === 6) {
-			return _this;
-		} else if (aNum.length === 3) {
-			let numHex = "#";
-			for (let i = 0; i < aNum.length; i += 1) {
-				numHex += (aNum[i] + aNum[i]);
-			}
-			return numHex;
-		}
-	} else {
-		return _this;
-	}
-}
-
-
-/**
-* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
-* sHex为传入的十六进制的色值
-* alpha为rgba的透明度
-*/
-export function colorToRgba(color, alpha = 0.3) {
-	color = rgbToHex(color)
-	// 十六进制颜色值的正则表达式
-	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
-	/* 16进制颜色转为RGB格式 */
-	let sColor = `${color}`.toLowerCase()
-	if (sColor && reg.test(sColor)) {
-		if (sColor.length === 4) {
-			var sColorNew = '#'
-			for (let i = 1; i < 4; i += 1) {
-				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
-			}
-			sColor = sColorNew
-		}
-		// 处理六位的颜色值
-		var sColorChange = []
-		for (let i = 1; i < 7; i += 2) {
-			sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
-		}
-		// return sColorChange.join(',')
-		return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
-	} 
-	else {
-		return sColor
-	}
+}
+// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
+export function hexToRgb(sColor, str = true) {
+	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+	sColor = sColor.toLowerCase();
+	if (sColor && reg.test(sColor)) {
+		if (sColor.length === 4) {
+			let sColorNew = "#";
+			for (let i = 1; i < 4; i += 1) {
+				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+			}
+			sColor = sColorNew;
+		}
+		//处理六位的颜色值
+		let sColorChange = [];
+		for (let i = 1; i < 7; i += 2) {
+			sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
+		}
+		if(!str) {
+			return sColorChange;
+		} else {
+			return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
+		}
+	} else if (/^(rgb|RGB)/.test(sColor)) {
+		let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
+		return arr.map(val => Number(val));
+	} else {
+		return sColor;
+	}
+};
+
+// 将rgb表示方式转换为hex表示方式
+export function rgbToHex(rgb) {
+	let _this = rgb;
+	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+	if (/^(rgb|RGB)/.test(_this)) {
+		let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+		let strHex = "#";
+		for (let i = 0; i < aColor.length; i++) {
+			let hex = Number(aColor[i]).toString(16);
+			hex = String(hex).length == 1 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
+			if (hex === "0") {
+				hex += hex;
+			}
+			strHex += hex;
+		}
+		if (strHex.length !== 7) {
+			strHex = _this;
+		}
+		return strHex;
+	} else if (reg.test(_this)) {
+		let aNum = _this.replace(/#/, "").split("");
+		if (aNum.length === 6) {
+			return _this;
+		} else if (aNum.length === 3) {
+			let numHex = "#";
+			for (let i = 0; i < aNum.length; i += 1) {
+				numHex += (aNum[i] + aNum[i]);
+			}
+			return numHex;
+		}
+	} else {
+		return _this;
+	}
+}
+
+
+/**
+* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+* sHex为传入的十六进制的色值
+* alpha为rgba的透明度
+*/
+export function colorToRgba(color, alpha = 0.3) {
+	color = rgbToHex(color)
+	// 十六进制颜色值的正则表达式
+	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+	/* 16进制颜色转为RGB格式 */
+	let sColor = `${color}`.toLowerCase()
+	if (sColor && reg.test(sColor)) {
+		if (sColor.length === 4) {
+			var sColorNew = '#'
+			for (let i = 1; i < 4; i += 1) {
+				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+			}
+			sColor = sColorNew
+		}
+		// 处理六位的颜色值
+		var sColorChange = []
+		for (let i = 1; i < 7; i += 2) {
+			sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+		}
+		// return sColorChange.join(',')
+		return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
+	} 
+	else {
+		return sColor
+	}
 }