feat: scrollbar

JasKang · Apr 27, 2024 · 36ca2c3 · 36ca2c3
1 parent 8f0d6d5
commit 36ca2c3
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 31 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "references.preferredLocation": "peek",
-  "eslint.experimental.useFlatConfig": true,
-  "tailwindCSS.experimental.classRegex": [
-    ["tw\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["clsVariants\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["classed(?:\\.\\w*)?\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["[a-zA-Z]*Class = '([^']+)'"]
-  ]
+  "eslint.experimental.useFlatConfig": true
 }
diff --git a/site/components/booth/button.vue b/site/components/booth/button.vue
@@ -15,7 +15,7 @@ const slots = defineSlots<{ default?(_: {}): any }>()
 //   disabled: Boolean,
 
 const variant = ref<'solid' | 'soft' | 'ghost' | 'outline' | 'link'>('solid')
-const size = ref<'sm' | 'md' | 'lg'>('sm')
+const size = ref<'sm' | 'md' | 'lg'>('md')
 const color = ref<ColorAlias>('primary')
 const pill = ref(false)
 const square = ref(false)
@@ -26,6 +26,16 @@ const disabled = ref(false)
 <template>
   <div class="flex w-full flex-col rounded-md border md:flex-row-reverse">
     <div class="flex-1 space-y-2 border-l p-6">
+      <div class="flex items-start">
+        <div class="mr-4 w-16 py-2 text-right text-sm font-semibold">variant:</div>
+        <RadioGroup v-model:value="variant" class="grid flex-1 grid-cols-3 gap-2 py-1.5">
+          <Radio value="solid" class="col-span-1">solid</Radio>
+          <Radio value="soft" class="col-span-1">soft</Radio>
+          <Radio value="ghost" class="col-span-1">ghost</Radio>
+          <Radio value="outline" class="col-span-1">outline</Radio>
+          <Radio value="link" class="col-span-1">link</Radio>
+        </RadioGroup>
+      </div>
       <div class="flex items-start">
         <div class="mr-4 w-16 py-2 text-right text-sm font-semibold">color:</div>
         <Select
@@ -61,22 +71,13 @@ const disabled = ref(false)
           ]"
         ></Select>
       </div>
-      <div class="flex items-start">
-        <div class="mr-4 w-16 py-2 text-right text-sm font-semibold">variant:</div>
-        <RadioGroup v-model:value="variant" class="grid flex-1 grid-cols-3 gap-2 py-2">
-          <Radio value="solid" class="col-span-1">solid</Radio>
-          <Radio value="soft" class="col-span-1">soft</Radio>
-          <Radio value="ghost" class="col-span-1">ghost</Radio>
-          <Radio value="outline" class="col-span-1">outline</Radio>
-          <Radio value="link" class="col-span-1">link</Radio>
-        </RadioGroup>
-      </div>
+
       <div class="flex items-start">
         <div class="mr-4 w-16 py-2 text-right text-sm font-semibold">size:</div>
         <RadioGroup v-model:value="size" class="grid flex-1 grid-cols-3 py-2">
-          <div class=""><Radio value="sm">sm</Radio></div>
-          <div class=""><Radio value="md">md</Radio></div>
-          <div class=""><Radio value="lg">lg</Radio></div>
+          <Radio value="sm">sm</Radio>
+          <Radio value="md">md</Radio>
+          <Radio value="lg">lg</Radio>
         </RadioGroup>
       </div>
 
@@ -109,7 +110,7 @@ const disabled = ref(false)
     </div>
     <div class="flex flex-1 items-center justify-center p-6">
       <Button :variant :size :color :pill :square :block :loading :disabled>
-        <InboxIcon v-if="square" class="h-4 w-4" />
+        <InboxIcon v-if="square" class="h-[1.2em] w-[1.2em]" />
         <template v-else>Button</template>
       </Button>
     </div>

diff --git a/site/components/button.md b/site/components/button.md
@@ -8,7 +8,7 @@ hello: world
 
 # Button
 
-##
+## 基础用法
 
 <ButtonBooth/>
 

diff --git a/src/Button/index.vue b/src/Button/index.vue
@@ -26,8 +26,6 @@ const props = defineProps({
   loading: Boolean,
   disabled: Boolean,
 })
-
-// const style = computed(() => createButtonVar(props.variant, props.color))
 </script>
 <template>
   <button
@@ -38,7 +36,7 @@ const props = defineProps({
       '--accent-500': cvar(`${props.color}-500`),
       '--accent-600': cvar(`${props.color}-600`),
     }"
-    class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-colors focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    class="inline-flex items-center justify-center whitespace-nowrap text-center font-medium ring-offset-white transition-colors focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
     :class="[
       {
         solid: 'bg-[--accent-500] text-white hover:bg-[--accent-600]',
@@ -48,9 +46,9 @@ const props = defineProps({
         link: 'underline-offset-4 hover:underline',
       }[props.variant],
       {
-        sm: `h-8 ${props.square ? 'w-8' : 'px-3 py-1'}`,
-        md: `h-9 ${props.square ? 'w-9' : 'px-3.5 py-1.5'}`,
-        lg: `h-10 ${props.square ? 'w-10' : 'px-4 py-2'}`,
+        sm: `h-7 text-xs ${props.square ? 'w-7' : 'px-2 py-1'}`,
+        md: `h-9 text-sm ${props.square ? 'w-9' : 'px-3 py-1.5'}`,
+        lg: `h-11 text-base ${props.square ? 'w-11' : 'px-4 py-2'}`,
       }[props.size],
       props.pill ? 'rounded-full' : 'rounded-md',
       !props.square && props.block ? 'w-full' : '',

diff --git a/src/Textarea/Textarea.vue b/src/Textarea/Textarea.vue
@@ -2,8 +2,8 @@
 import { ref, computed, type PropType } from 'vue'
 import { useModelValue } from '../use/useModelValue'
 import { BaseInput } from '@/Base'
-import { scrollbarClass } from '@/utils/tw'
 
+import { BUILTIN_CLASS } from '@/utils/theme'
 defineOptions({ name: 'Textarea' })
 const emit = defineEmits<{
   'update:value': [string]
@@ -51,7 +51,7 @@ const inputRef = ref<HTMLTextAreaElement>()
   <BaseInput class="z-textarea relative flex-col">
     <textarea
       class="block w-full flex-1 cursor-[inherit] border-none bg-transparent px-3 py-1.5 text-sm placeholder:text-slate-400"
-      :class="scrollbarClass"
+      :class="BUILTIN_CLASS.scrollbar"
       :style="{
         resize: resize,
         boxShadow: 'none',

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -35,3 +35,32 @@ export type InputValue = string | number
 export function cvar(val: `${ColorName}-${ColorLvl}`) {
   return `var(--color-${val})`
 }
+
+// .rt-TextAreaInput::-webkit-scrollbar {
+//   width: var(--space-3);
+//   height: var(--space-3)
+// }
+
+// .rt-TextAreaInput::-webkit-scrollbar-thumb,.rt-TextAreaInput::-webkit-scrollbar-track {
+//   background-clip: content-box;
+//   border: var(--space-1) solid transparent;
+//   border-radius: var(--space-3)
+// }
+
+// .rt-TextAreaInput::-webkit-scrollbar-track {
+//   background-color: var(--gray-a3)
+// }
+
+// .rt-TextAreaInput::-webkit-scrollbar-thumb {
+//   background-color: var(--gray-a8)
+// }
+
+// @media (hover: hover) {
+//   :where(.rt-TextAreaInput:not(:disabled))::-webkit-scrollbar-thumb:hover {
+//       background-color:var(--gray-a9)
+//   }
+// }
+export const BUILTIN_CLASS = {
+  scrollbar:
+    '[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar]:h-3 [&::-webkit-scrollbar-track]:bg-clip-content [&::-webkit-scrollbar-track]:border-4 [&::-webkit-scrollbar-track]:border-solid [&::-webkit-scrollbar-track]:border-transparent [&::-webkit-scrollbar-track]:rounded-lg [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-gray-700 [&::-webkit-scrollbar-thumb]:bg-clip-content [&::-webkit-scrollbar-thumb]:border-4  [&::-webkit-scrollbar-thumb]:border-solid  [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:rounded-lg [&::-webkit-scrollbar-thumb]:bg-gray-500 hover:[&:not(:disabled)::-webkit-scrollbar-thumb]:bg-gray-800 dark:hover:[&:not(:disabled)::-webkit-scrollbar-thumb]:bg-gray-200',
+}