@falcon-ui/falcon-ui 1.0.0

package/theme/src/tree.scss

@@ -0,0 +1,369 @@
+@use './mixins/bem.scss' as bem;
+@use 'element-plus/theme-chalk/src/checkbox.scss';
+@use 'element-plus/theme-chalk/src/tree.scss';
+
+/**
+ * 树组件样式优先继承 Element Plus Tree 视觉变量。
+ */
+@include bem.b(tree) {
+  color: var(--el-tree-text-color);
+  font-size: var(--el-font-size-base);
+  line-height: 1.5;
+  --fl-tree-node-content-height: var(--el-tree-node-content-height, 26px);
+  --fl-tree-node-hover-bg-color: var(--el-tree-node-hover-bg-color, var(--el-fill-color-light));
+  --fl-tree-node-text-color: var(--el-tree-text-color, var(--el-text-color-regular));
+  --fl-tree-node-icon-color: var(--el-tree-expand-icon-color, var(--el-text-color-placeholder));
+  --fl-tree-node-selected-bg-color: var(--el-color-primary-light-9);
+  --fl-tree-node-selected-text-color: var(--el-color-primary);
+  --fl-tree-node-disabled-text-color: var(--el-disabled-text-color);
+  --fl-tree-leaf-dot-color: var(--el-text-color-secondary);
+  --fl-tree-line-color: var(--el-border-color-light, #dcdfe6);
+  --fl-tree-line-width: 1px;
+  --fl-tree-drop-line-color: var(--el-color-primary);
+  --fl-tree-drop-forbidden-color: var(--el-color-danger);
+  --fl-tree-drop-inside-bg-color: var(--el-color-primary-light-9);
+  --fl-tree-node-filtered-color: var(--el-color-primary);
+  --fl-tree-node-filtered-bg-color: var(--el-color-primary-light-9);
+  --fl-tree-node-indent: 20px;
+  --fl-tree-switcher-size: var(--fl-tree-node-indent);
+  --fl-tree-collapse-duration: var(--el-transition-duration, 0.3s);
+  --fl-tree-collapse-easing: var(--el-transition-function-ease-in-out-bezier, ease-in-out);
+
+  &:focus {
+    outline: none;
+  }
+
+  @include bem.e(item) {
+    position: relative;
+    box-sizing: border-box;
+
+    &:hover > #{bem.selector('tree', 'item-content')} {
+      background-color: var(--fl-tree-node-hover-bg-color);
+    }
+  }
+
+  @include bem.e(item-content) {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    min-height: var(--fl-tree-node-content-height);
+    padding: 0 8px;
+    border-radius: var(--fl-radius-sm);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--el-transition-duration);
+
+    &.is-selected {
+      background-color: var(--fl-tree-node-selected-bg-color);
+    }
+
+    &.is-focused:not(.is-selected) {
+      background-color: var(--fl-tree-node-hover-bg-color);
+    }
+
+    &.is-selected #{bem.selector('tree', 'item-title')} {
+      color: var(--fl-tree-node-selected-text-color);
+    }
+
+    &.is-filtered:not(.is-selected) {
+      background-color: var(--fl-tree-node-filtered-bg-color);
+    }
+
+    &.is-filtered #{bem.selector('tree', 'item-title')} {
+      color: var(--fl-tree-node-filtered-color);
+      font-weight: 600;
+    }
+
+    &.is-disabled #{bem.selector('tree', 'item-icon')},
+    &.is-disabled #{bem.selector('tree', 'item-title')} {
+      color: var(--fl-tree-node-disabled-text-color);
+    }
+
+    &.is-draggable {
+      cursor: grab;
+    }
+
+    &.is-dragging {
+      opacity: 0.45;
+      cursor: grabbing;
+    }
+
+    &.is-drop-inside.is-drop-allowed {
+      background-color: var(--fl-tree-drop-inside-bg-color);
+    }
+
+    &.is-drop-forbidden {
+      cursor: no-drop;
+    }
+
+    &.is-drop-before::before,
+    &.is-drop-after::after {
+      position: absolute;
+      z-index: 2;
+      inset-inline-start: 8px;
+      inset-inline-end: 8px;
+      border-top: 2px solid var(--fl-tree-drop-line-color);
+      content: '';
+      pointer-events: none;
+    }
+
+    &.is-drop-before::before {
+      top: 0;
+    }
+
+    &.is-drop-after::after {
+      bottom: 0;
+    }
+
+    &.is-drop-forbidden::before,
+    &.is-drop-forbidden::after {
+      border-color: var(--fl-tree-drop-forbidden-color);
+    }
+  }
+
+  @include bem.e(indent) {
+    display: inline-flex;
+    align-self: stretch;
+    flex: 0 0 auto;
+    min-height: var(--fl-tree-node-content-height);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  @include bem.e(indent-unit) {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 var(--fl-tree-node-indent);
+    width: var(--fl-tree-node-indent);
+    min-height: var(--fl-tree-node-content-height);
+  }
+
+  @include bem.e(item-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 16px;
+    width: 16px;
+    min-width: 16px;
+    min-height: var(--fl-tree-node-content-height);
+    margin-inline-end: 4px;
+    color: var(--fl-tree-node-icon-color);
+  }
+
+  @include bem.e(item-checkbox) {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    min-height: var(--fl-tree-node-content-height);
+    margin-inline-end: 4px;
+
+    .el-checkbox {
+      margin-right: 0;
+    }
+
+    .el-checkbox__label {
+      display: none;
+    }
+  }
+
+  @include bem.e(switcher) {
+    position: relative;
+    display: inline-flex;
+    align-self: stretch;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: var(--fl-tree-node-content-height);
+
+    &--noop {
+      cursor: default;
+    }
+  }
+
+  @include bem.e(switcher-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    appearance: none;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  @include bem.e(switcher-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+
+    &.is-loading {
+      animation: rotating 2s linear infinite;
+    }
+  }
+
+  @include bem.e(switcher-dot) {
+    width: 4px;
+    height: 4px;
+    border-radius: 999px;
+    background-color: var(--fl-tree-leaf-dot-color);
+  }
+
+  @include bem.e(switcher-leaf-line) {
+    position: relative;
+    z-index: 1;
+    display: block;
+    align-self: stretch;
+    width: 100%;
+    min-height: var(--fl-tree-node-content-height);
+  }
+
+  @include bem.e(switcher-leaf-icon) {
+    position: absolute;
+    z-index: 2;
+    width: 6px;
+    height: 6px;
+    border: var(--fl-tree-line-width) solid var(--fl-tree-line-color);
+    border-radius: 999px;
+    background-color: var(--el-fill-color-blank);
+  }
+
+  @include bem.e(item-title) {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+    min-height: var(--fl-tree-node-content-height);
+    color: var(--fl-tree-node-text-color);
+    font-size: inherit;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+
+  @include bem.e(children) {
+    display: grid;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+  }
+
+  @include bem.e(children-inner) {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .fl-tree-collapse-enter-active,
+  .fl-tree-collapse-leave-active {
+    transform-origin: top;
+    transition:
+      grid-template-rows var(--fl-tree-collapse-duration) var(--fl-tree-collapse-easing),
+      opacity var(--fl-tree-collapse-duration) var(--fl-tree-collapse-easing),
+      transform var(--fl-tree-collapse-duration) var(--fl-tree-collapse-easing);
+  }
+
+  .fl-tree-collapse-enter-from,
+  .fl-tree-collapse-leave-to {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  .fl-tree-collapse-enter-to,
+  .fl-tree-collapse-leave-from {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fl-tree-collapse-enter-active,
+    .fl-tree-collapse-leave-active {
+      transition: none;
+    }
+
+    .fl-tree-collapse-enter-from,
+    .fl-tree-collapse-leave-to,
+    .fl-tree-collapse-enter-to,
+    .fl-tree-collapse-leave-from {
+      transform: none;
+    }
+  }
+
+  &.is-show-line {
+    #{bem.selector('tree', 'item-icon')} {
+      flex: 0 0 var(--fl-tree-switcher-size);
+      width: var(--fl-tree-switcher-size);
+      min-width: var(--fl-tree-switcher-size);
+    }
+
+    #{bem.selector('tree', 'indent-unit')} {
+      &::before {
+        position: absolute;
+        top: 0;
+        inset-inline-end: calc(var(--fl-tree-node-indent) / 2);
+        bottom: 0;
+        margin-inline-end: calc(var(--fl-tree-line-width) * -0.5);
+        border-inline-end: var(--fl-tree-line-width) solid var(--fl-tree-line-color);
+        content: '';
+      }
+
+      &.is-end::before {
+        display: none;
+      }
+    }
+
+    #{bem.selector('tree', 'switcher-leaf-line')} {
+      width: var(--fl-tree-switcher-size);
+
+      &::before {
+        position: absolute;
+        top: 0;
+        inset-inline-end: calc(50% - (var(--fl-tree-line-width) / 2));
+        bottom: 0;
+        border-inline-end: var(--fl-tree-line-width) solid var(--fl-tree-line-color);
+        content: '';
+      }
+
+      &::after {
+        position: absolute;
+        inset-inline-start: 50%;
+        top: 50%;
+        width: 50%;
+        border-bottom: var(--fl-tree-line-width) solid var(--fl-tree-line-color);
+        transform: translateY(-50%);
+        content: '';
+      }
+    }
+
+    #{bem.selector('tree', 'switcher-leaf-icon')} {
+      top: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    #{bem.selector('tree', 'item')}.is-leaf.is-last
+      #{bem.selector('tree', 'switcher-leaf-line')}::before {
+      height: 50%;
+      bottom: auto;
+    }
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/types/components/barcode/index.d.ts

@@ -0,0 +1,183 @@
+export declare const FlBarcode: import("@falcon-ui/falcon-ui/utils").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly value: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly format: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeFormat>;
+        readonly default: "CODE128";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000000";
+    };
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#ffffff";
+    };
+    readonly displayValue: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly font: {
+        readonly type: StringConstructor;
+        readonly default: "monospace";
+    };
+    readonly fontOptions: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    readonly textAlign: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeTextAlign>;
+        readonly default: "center";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly textPosition: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeTextPosition>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly textMargin: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly margin: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly marginTop: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginRight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginBottom: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginLeft: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly value: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly format: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeFormat>;
+        readonly default: "CODE128";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000000";
+    };
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#ffffff";
+    };
+    readonly displayValue: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly font: {
+        readonly type: StringConstructor;
+        readonly default: "monospace";
+    };
+    readonly fontOptions: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    readonly textAlign: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeTextAlign>;
+        readonly default: "center";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly textPosition: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlBarcodeTextPosition>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly textMargin: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly margin: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly marginTop: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginRight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginBottom: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly marginLeft: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly height: number;
+    readonly width: number;
+    readonly value: string;
+    readonly color: string;
+    readonly text: string;
+    readonly font: string;
+    readonly format: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPCA" | "UPCE";
+    readonly backgroundColor: string;
+    readonly margin: number;
+    readonly displayValue: boolean;
+    readonly fontOptions: string;
+    readonly fontSize: number;
+    readonly textAlign: "center" | "right" | "left";
+    readonly textPosition: "top" | "bottom";
+    readonly textMargin: number;
+    readonly marginTop: number;
+    readonly marginRight: number;
+    readonly marginBottom: number;
+    readonly marginLeft: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default FlBarcode;
+export type { BarcodeProps, FlBarcodeFormat, FlBarcodeProps, FlBarcodeTextAlign, FlBarcodeTextPosition } from './src/barcode';

package/types/components/barcode/src/barcode.d.ts

@@ -0,0 +1,147 @@
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+export declare const flBarcodeFormats: readonly ["CODE128", "CODE39", "EAN13", "EAN8", "UPCA", "UPCE"];
+export type FlBarcodeFormat = (typeof flBarcodeFormats)[number];
+export declare const flBarcodeTextAligns: readonly ["left", "center", "right"];
+export type FlBarcodeTextAlign = (typeof flBarcodeTextAligns)[number];
+export declare const flBarcodeTextPositions: readonly ["top", "bottom"];
+export type FlBarcodeTextPosition = (typeof flBarcodeTextPositions)[number];
+export declare const flBarcodeProps: {
+    /**
+     * Barcode payload.
+     */
+    readonly value: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * Supported barcode format.
+     */
+    readonly format: {
+        readonly type: PropType<FlBarcodeFormat>;
+        readonly default: "CODE128";
+        readonly validator: (value: string) => boolean;
+    };
+    /**
+     * Width of each bar.
+     */
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    /**
+     * Barcode height.
+     */
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    /**
+     * Bar color.
+     */
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000000";
+    };
+    /**
+     * Background color.
+     */
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#ffffff";
+    };
+    /**
+     * Whether to display readable text.
+     */
+    readonly displayValue: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * Custom text. Falls back to value when empty.
+     */
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * Text font family.
+     */
+    readonly font: {
+        readonly type: StringConstructor;
+        readonly default: "monospace";
+    };
+    /**
+     * Text font style flags.
+     */
+    readonly fontOptions: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * Text font size.
+     */
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    /**
+     * Text alignment.
+     */
+    readonly textAlign: {
+        readonly type: PropType<FlBarcodeTextAlign>;
+        readonly default: "center";
+        readonly validator: (value: string) => boolean;
+    };
+    /**
+     * Text position.
+     */
+    readonly textPosition: {
+        readonly type: PropType<FlBarcodeTextPosition>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    /**
+     * Distance between barcode bars and text.
+     */
+    readonly textMargin: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    /**
+     * Global margin around the barcode.
+     */
+    readonly margin: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    /**
+     * Overrides the top margin when provided.
+     */
+    readonly marginTop: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    /**
+     * Overrides the right margin when provided.
+     */
+    readonly marginRight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    /**
+     * Overrides the bottom margin when provided.
+     */
+    readonly marginBottom: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    /**
+     * Overrides the left margin when provided.
+     */
+    readonly marginLeft: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+};
+export type FlBarcodeProps = ExtractPublicPropTypes<typeof flBarcodeProps>;
+export type BarcodeProps = FlBarcodeProps;