feat(core): edit theme editor 调整主题编辑器

Kythuen · May 30, 2024 · b185340 · b185340
1 parent 7399e35
commit b185340
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 192 deletions.
diff --git a/docs/.vitepress/components/layout/theme-editor/Index.vue b/docs/.vitepress/components/layout/theme-editor/Index.vue
@@ -21,7 +21,7 @@
       :options="EDIT_TYPE_OPTIONS"
       ring="1 inset $wb-color-border-base"
     />
-    <div w="full" h="full" flex gap="2" class="scrollable">
+    <div w="full" h="[calc(100%-6rem)]" flex gap="2">
       <div
         w="14"
         h="full"
@@ -52,10 +52,14 @@
           <div>{{ item.lable }}</div>
         </div>
       </div>
-      <div h="full" flex="1 ~ col" gap="6">
+      <div h="full" flex="1 ~ col" gap="6" class="scrollable">
         <component :is="THEME_CATEGORY_COMP[currentCategory]" />
       </div>
     </div>
+    <div w="full" h="14" flex="~ row" items="center" gap="2">
+      <wb-button flex="1">Reset All</wb-button>
+      <wb-button flex="1">Export</wb-button>
+    </div>
   </div>
 </template>
 

diff --git a/docs/.vitepress/components/layout/theme-editor/Size.vue b/docs/.vitepress/components/layout/theme-editor/Size.vue
@@ -1,7 +1,13 @@
 <template>
+  <!--
+    title: Component Height
+    item: height
+    size: sm | md | lg
+    value: 18 | 24
+   -->
   <div
     v-for="item in COMPONENT_SIZE_ITEM"
-    :key="`SIZE_ITEM_${item.value}`"
+    :key="`SIZE_ITEM_${item}`"
     flex="~ col"
     gap="2"
   >
@@ -14,11 +20,21 @@
         placement="left-start"
         arrow
         :z-index="100"
+        @show="
+          currentOperationSize =
+            changedVaribles[`--comp-${item.value}-${size.label}`]?.data || size.value
+        "
       >
         <div p="y-2 x-3" bg="$wb-color-layer" rounded="2">
-          <div>{{ `--comp-${item.value}-${size.label}` }}</div>
+          <div text="$wb-color-text-2">{{ `--comp-${item.value}-${size.label}` }}</div>
           <div w="full" flex justify="between" items="center">
-            <div>xxx</div>
+            <div text="$wb-color-text-4">
+              <span>{{ `--size-${size.value}` }}</span>
+              <span v-if="changedVaribles[`--comp-${item.value}-${size.label}`]"
+                >:
+                {{ changedVaribles[`--comp-${item.value}-${size.label}`].data }}px</span
+              >
+            </div>
             <div h="1em" flex="~ row shrink-0" items="center">
               <div
                 relative
@@ -49,16 +65,22 @@
         <template #content>
           <div w="36" p="2" flex="~ col" gap="4">
             <wb-input-number
+              v-model="currentOperationSize"
               w="full"
               flex="1 ~ inline"
-              :default-value="size.value"
               :min="Math.floor(size.value / 2)"
               :max="Math.floor(size.value * 2)"
               size="sm"
-              @change="(d:number) => handleSizeChange(d, size.label)"
+              @change="(d:number) => handleSizeChange(d, item.value, size.label)"
             />
             <div p="2">
-              <wb-slider>slider</wb-slider>
+              <wb-slider
+                v-model="currentOperationSize"
+                :popup-props="{ zIndex: 101, arrow: true }"
+                @change="(d:number) => handleSizeChange(d, item.value, size.label)"
+              >
+                slider
+              </wb-slider>
             </div>
           </div>
         </template>
@@ -68,6 +90,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 defineOptions({ name: 'ThemeEditorSize' })
 
 const COMPONENT_SIZE_VALUE = [
@@ -77,16 +101,23 @@ const COMPONENT_SIZE_VALUE = [
   { label: 'lg', value: 40 },
   { label: 'xl', value: 48 }
 ]
+
 const COMPONENT_SIZE_ITEM = [
   { label: 'Component Height', value: 'height' },
   { label: 'Component Padding', value: 'padding' },
   { label: 'Component Font Size', value: 'font-size' }
 ]
 
-function handleSizeChange(data: number, size: string) {
-  document.documentElement.style.setProperty(
-    `--comp-size-${size}`,
-    `calc(${data} / 16 * 1rem)`
-  )
+const currentOperationSize = ref(0)
+const changedVaribles: any = ref({})
+
+function handleSizeChange(data: number, item: string, size: string) {
+  currentOperationSize.value = data
+  const varible = `--comp-${item}-${size}`
+  const varibleValue = `calc(${data} / 16 * 1rem)`
+  changedVaribles.value[varible] = { data, style: varibleValue }
+  document.documentElement.style.setProperty(varible, varibleValue)
+
+  console.log(changedVaribles.value)
 }
 </script>
diff --git a/docs/.vitepress/theme/styles/vitepress.less b/docs/.vitepress/theme/styles/vitepress.less
@@ -6,7 +6,7 @@
   --vp-c-divider: var(--wb-color-border-soft);
   --vp-c-text-2: var(--wb-color-text-3);
 
-  --vp-font-family-base: 'DM Sans', 'DM Sans Fallback: Arial', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  // --vp-font-family-base: 'DM Sans', 'DM Sans Fallback: Arial', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --vp-header-anchor-symbol: '#';
 

diff --git a/packages/core/src/components/button/styles.css b/packages/core/src/components/button/styles.css
@@ -23,35 +23,35 @@
 
 /* ----------------------------------- size ----------------------------------- */
 .wb-button--xs {
-  --wb-button-height: var(--comp-size-xs);
+  --wb-button-height: var(--comp-height-xs);
   --wb-button-padding: var(--comp-padding-xs);
   --wb-button-font-size: var(--comp-font-size-xs);
   --wb-button-radius: var(--comp-radius-xs);
   --wb-button-gap: var(--comp-content-gap-xs);
 }
 .wb-button--sm {
-  --wb-button-height: var(--comp-size-sm);
+  --wb-button-height: var(--comp-height-sm);
   --wb-button-padding: var(--comp-padding-sm);
   --wb-button-font-size: var(--comp-font-size-sm);
   --wb-button-radius: var(--comp-radius-sm);
   --wb-button-gap: var(--comp-content-gap-sm);
 }
 .wb-button--md {
-  --wb-button-height: var(--comp-size-md);
+  --wb-button-height: var(--comp-height-md);
   --wb-button-padding: var(--comp-padding-md);
   --wb-button-font-size: var(--comp-font-size-md);
   --wb-button-radius: var(--comp-radius-md);
   --wb-button-gap: var(--comp-content-gap-md);
 }
 .wb-button--lg {
-  --wb-button-height: var(--comp-size-lg);
+  --wb-button-height: var(--comp-height-lg);
   --wb-button-padding: var(--comp-padding-lg);
   --wb-button-font-size: var(--comp-font-size-lg);
   --wb-button-radius: var(--comp-radius-lg);
   --wb-button-gap: var(--comp-content-gap-lg);
 }
 .wb-button--xl {
-  --wb-button-height: var(--comp-size-xl);
+  --wb-button-height: var(--comp-height-xl);
   --wb-button-padding: var(--comp-padding-xl);
   --wb-button-font-size: var(--comp-font-size-xl);
   --wb-button-radius: var(--comp-radius-xl);

diff --git a/packages/core/src/components/input-number/input-number.vue b/packages/core/src/components/input-number/input-number.vue
@@ -136,7 +136,16 @@
 <script setup lang="ts">
 import { useNode, useVModel } from '@/composables'
 import { clickDelegate, getComponentSizeStyles, on, off } from '@/utils'
-import { Ref, computed, onBeforeUnmount, onMounted, ref, toRefs, watchEffect } from 'vue'
+import {
+  Ref,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+  watchEffect
+} from 'vue'
 import {
   WithElementDefaultProps,
   WithElementProps,
@@ -201,6 +210,13 @@ const SuffixNode = () => renderNode('suffix')
 
 const [inputValue, setInputValue] = useVModel<number>(toRefs(props))
 
+watch(
+  () => inputValue.value,
+  () => {
+    // TODO: v-model
+    formatInputValue.value = inputValue.value.toString()
+  }
+)
 function getFormatValue(val: number) {
   return parseFloat(val.toFixed(props.decimal))
 }

diff --git a/packages/core/src/components/input/api.ts b/packages/core/src/components/input/api.ts
@@ -33,6 +33,10 @@ export type Props = {
    * Maximum length allowed of input text.
    */
   maxLength?: number
+  /*
+   * Clearable or not.
+   */
+  clearable?: boolean
   /*
    * Readonly or not.
    */
@@ -54,6 +58,7 @@ export type Props = {
 export default {
   type: 'base',
   placeholder: '',
+  clearable: true,
   maxLength: -1,
   align: 'start',
   readonly: false

diff --git a/packages/core/src/components/input/input.vue b/packages/core/src/components/input/input.vue
@@ -43,24 +43,37 @@
       color="$wb-input-text"
       :class="contentClass"
       style="font-size: var(--wb-input-font-size)"
+      @focus="setIsFocus(true)"
+      @blur="handleBlur"
       @change="setInputValue(($event as any).target.value)"
     />
+
     <button
-      v-if="suffix || $slots.suffix"
       tabindex="-1"
       flex="~ shrink-0"
       items="center"
       justify="center"
+      gap="$wb-input-gap"
     >
-      <slot name="suffix">
-        <SuffixNode />
-      </slot>
+      <i
+        v-if="
+          props.clearable && isFocus && !props.readonly && !props.disabled && !!inputValue
+        "
+        w="1.25em"
+        h="1.25em"
+        i="mdi-close-circle"
+        cursor="pointer"
+        color="$wb-color-layer hover:$wb-color-text-4"
+        class="transition-ease"
+        @click="setInputValue('')"
+      />
+      <SuffixNode v-if="suffix || $slots.suffix" />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useVModel, useNode, useComponentClasses } from '@/composables'
+import { useVModel, useNode, useComponentClasses, useState } from '@/composables'
 import { getComponentSizeStyles } from '@/utils'
 import { computed, toRefs, ref } from 'vue'
 import {
@@ -100,12 +113,6 @@ const propsStyles = computed(() => {
 })
 const contentClass = computed(() => {
   const result = ['wb-input-content']
-  // if (slots.prefix) {
-  //   result.push('p-l-0')
-  // }
-  // if (slots.suffix) {
-  //   result.push('p-r-0')
-  // }
   if (props.align) {
     result.push(`wb-input-content--${props.align}`)
   }
@@ -122,4 +129,9 @@ const InputRef = ref()
 function setFocus() {
   InputRef.value?.focus()
 }
+
+const [isFocus, setIsFocus] = useState(false)
+function handleBlur() {
+  setTimeout(() => setIsFocus(false), 100)
+}
 </script>
diff --git a/packages/core/src/components/slider/api.ts b/packages/core/src/components/slider/api.ts
@@ -1,42 +1,22 @@
-import { XNode as VNode } from '../types'
+import { Props as PopupProps } from '../popup/api'
 
-export type Slots = {
-  /*
-   * Default slot of the radio.
-   */
-  default: () => any
-  /*
-   * Content of the radio.
-   */
-  content: () => any
-}
+export type Slots = {}
 
-export type Emits = {
-  /*
-   * Click action.
-   */
-  change: [color: string]
-}
+export type Emits = {}
 
 export type Props = {
   /*
-   * Show eyedropper or not.
-   */
-  dropper?: boolean
-  /*
-   * Click action.
+   * Maximum value.
    */
-  onClick?: (checked: boolean) => void
+  max?: number
   /*
-   * Default slot of the radio.
+   * Minimum value.
    */
-  default?: string | VNode
+  min?: number
   /*
-   * Value of radio.
+   * Continuous transmission the properties for the `Popup` component.
    */
-  value?: boolean
+  popupProps?: PopupProps
 }
 
-export default {
-  dropper: false
-} as Props
+export default {} as Props