antd-solid 0.0.2 → 0.0.3

package/unocss.config.ts

@@ -1,17 +1,75 @@
-/* eslint-disable @typescript-eslint/promise-function-async */
 import { defineConfig } from '@unocss/vite'
 import { presetMini } from '@unocss/preset-mini'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import presetIcons from '@unocss/preset-icons'
 
 export default defineConfig({
+  preflights: [
+    {
+      getCSS: () => `
+        :root {
+          --primary-color: #52c41a;
+          --light-primary-color: #95de64;
+          --dark-primary-color: #237804;
+          --active-bg-color: #d9f7be;
+          --hover-bg-color: rgba(0,0,0,.04);
+        
+          --light-error-color: #ff7875;
+          --dark-error-color: #d9363e;
+        
+          --error-bg-color: #fff2f0;
+          --error-bg-hover-color: #fff1f0;
+        
+          --warning-color: #faad14;
+          --color-warning-border-hover: #ffd666;
+        
+          --secondary-border-color: #f0f0f0;
+        
+          --light-color: rgba(0, 0, 0, 0.45);
+          --dark-color: rgba(0, 0, 0, 0.88);
+        
+          --color-text-secondary: rgba(0, 0, 0, 0.65);
+          --color-text-tertiary: rgba(0, 0, 0, 0.45);
+          --color-text-quaternary: rgba(0, 0, 0, 0.25);
+        
+          --light-bg-color: #fafafa;
+
+          --ant-color-error: #ff4d4f;
+          --ant-color-text: rgba(0, 0, 0, 0.88);
+          --ant-color-text-disabled: rgba(0, 0, 0, 0.25);
+          --ant-color-text-heading: rgba(0, 0, 0, 0.88);
+          --ant-color-border: #d9d9d9;
+          --ant-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
+
+          --ant-color-bg-layout: #f5f5f5;
+
+          --ant-margin-xs: 8px;
+          --ant-margin-sm: 12px;
+          --ant-margin-xl: 32px;
+
+          --ant-padding-sm: 12px;
+
+          --ant-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+
+          --ant-border-radius-sm: 4px;
+          --ant-border-radius: 6px;
+          --ant-border-radius-lg: 8px;
+
+          --ant-collapse-header-bg: rgba(0, 0, 0, 0.02);
+          --ant-collapse-header-padding: 12px 16px;
+        
+          font-size: 14px;
+        }
+      `,
+    },
+  ],
   presets: [
     presetMini({
-      prefix: 'ant-'
+      prefix: 'ant-',
     }),
     presetIcons({
       collections: {
-        'ant-design': () => import('@iconify-json/ant-design').then(i => i.icons),
+        'ant-design': async () => await import('@iconify-json/ant-design').then(i => i.icons),
       },
       extraProperties: {
         display: 'inline-block',
@@ -61,10 +119,10 @@ export default defineConfig({
     },
     /**
      * 父级 hover 的状态定义子级的样式
-     * p-hover-child[.*]:
+     * p:hover-child[.*]:
      */
     matcher => {
-      const prevReg = /^p-hover-child\[(.*)\]:/
+      const prevReg = /^p:hover-child\[(.*)\]:/
       const match = matcher.match(prevReg)
       if (!match) return matcher
       return {
@@ -72,9 +130,22 @@ export default defineConfig({
         selector: s => `${s}:hover ${match[1] || '*'}`,
       }
     },
+    /**
+     * 有父级 class 的时候才会生效
+     * p[.*]:
+     */
+    matcher => {
+      const prevReg = /^p\[(.*)\]:/
+      const match = matcher.match(prevReg)
+      if (!match) return matcher
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: s => `${match[1] || '*'} ${s}`,
+      }
+    },
   ],
   rules: [
-    ['rm-size-btn', { padding: 0, border: 'none', height: 'auto' }],
+    ['ant-rm-size-btn', { padding: 0, border: 'none', height: 'auto' }],
     [
       /^keyframes-spin$/,
       () => {
@@ -88,5 +159,18 @@ export default defineConfig({
         }`
       },
     ],
+    [
+      /^ant-keyframes-(.*)(\[.*\])(\[.*\])$/,
+      match => {
+        return `@keyframes ${match[1]} {
+          from {
+            ${match[2].slice(1, -1)};
+          }
+          to {
+            ${match[3].slice(1, -1)};
+          }
+        }`
+      },
+    ],
   ],
 })

package/src/Button.css

@@ -1,14 +0,0 @@
-@keyframes button-border {
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    inset: -4px;
-  }
-
-  to {
-    opacity: 0;
-  }
-}

package/src/Form.tsx

@@ -1,98 +0,0 @@
-import { set } from 'lodash-es'
-import {
-  type JSXElement,
-  type Component,
-  type JSX,
-  mergeProps,
-  Show,
-  Index,
-  createMemo,
-} from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { toArray } from './utils/array'
-import cs from 'classnames'
-
-export interface FormInstance<T extends {} = {}> {
-  validateFields: () => Promise<T>
-}
-
-export interface FormProps<T extends {} = {}> {
-  ref?: (form: FormInstance<T>) => void;
-  /**
-   * 表单布局
-   * 默认: horizontal
-   */
-  layout?: 'horizontal' | 'vertical' | 'inline'
-  /**
-   * 提交按钮
-   * @deprecated
-   */
-  submit?: (form: FormInstance<T>) => JSXElement
-  children: JSXElement
-}
-
-export interface FormItemComponentProps<T = any> {
-  defaultValue?: T
-  onChange?: (value: T) => void
-}
-
-export interface FormItemProps {
-  class?: string
-  style?: JSX.CSSProperties
-  required?: boolean
-  label?: JSXElement
-  name?: string
-  initialValue?: any
-  component: Component<FormItemComponentProps>
-}
-
-function Form<T extends {} = {}>(_props: FormProps<T>) {
-  const props = mergeProps({ layout: 'horizontal' } as FormProps, _props)
-
-  const resolvedChildren = createMemo(() => {
-    return toArray(props.children) as unknown as FormItemProps[]
-  })
-
-  const values = Object.fromEntries(
-    resolvedChildren().map(child => [child.name, child.initialValue]),
-  ) as T
-  const formInstance: FormInstance<T> = {
-    async validateFields() {
-      return await Promise.resolve(values)
-    },
-  }
-  _props.ref?.(formInstance)
-
-  return (
-    <div>
-      <Index each={resolvedChildren()}>
-        {item => (
-          <div class={cs('ant-flex ant-items-center ant-mb-16px', item().class)} style={item().style}>
-            <span class="ant-flex-shrink-0 ant-mr-8px">
-              <Show when={item().required}>
-                <span class='ant-mr-4px ant-text-[var(--error-color)]'>*</span>
-              </Show>
-              <label>{item().label}</label>
-            </span>
-
-            <Dynamic
-              component={item().component}
-              defaultValue={item().initialValue}
-              onChange={(value: any) => {
-                set(values, item().name!, value)
-              }}
-            />
-          </div>
-        )}
-      </Index>
-
-      {props.submit?.(formInstance as FormInstance<T>)}
-    </div>
-  )
-}
-
-Form.Item = (props: FormItemProps) => props as any
-
-Form.createForm = () => {}
-
-export default Form

package/src/index.css

@@ -1,21 +0,0 @@
-body {
-  --primary-color: #52c41a;
-  --light-primary-color: #95de64;
-  --dark-primary-color: #237804;
-  --active-bg-color: #d9f7be;
-
-  --error-color: #ff4d4f;
-  --warning-color: #faad14;
-
-  --border-color: #d9d9d9;
-  --secondary-border-color: #f0f0f0;
-
-  --light-color: rgba(0, 0, 0, 0.45);
-  --dark-color: rgba(0, 0, 0, 0.88);
-
-  --light-bg-color: #fafafa;
-  
-  --secondary-border-color: #f0f0f0;
-
-  font-size: 14px;
-}