tanxin-ui 0.2.0

package/lib/color-picker/src/color-picker.d.ts

@@ -0,0 +1,133 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    alpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    format: {
+        type: PropType<"HEX | RGB | HSL |HSV"[]>;
+        default: () => string[];
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    value: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    palette: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    history: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selection: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectionList: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+}, {
+    refInput: import("vue").Ref<any>;
+    render: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clear" | "update:value")[], "change" | "clear" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    alpha: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    format: {
+        type: PropType<"HEX | RGB | HSL |HSV"[]>;
+        default: () => string[];
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    value: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    palette: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    history: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selection: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectionList: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:value"?: (...args: any[]) => any;
+    onClear?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    size: string;
+    alpha: boolean;
+    value: string;
+    loading: boolean;
+    format: "HEX | RGB | HSL |HSV"[];
+    readonly: boolean;
+    clearable: boolean;
+    palette: boolean;
+    history: boolean;
+    selection: boolean;
+    selectionList: string[];
+}>;
+export default _default;

package/lib/color-picker/src/color-picker.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var type = require("../../utils/type.js");
+var index = require("../../popper/index.js");
+var colorPickerContent = require("./color-picker-content.js");
+require("../../utils/components/icons/Checkmark.js");
+require("../../utils/components/icons/CheckmarkCircle.js");
+require("../../utils/components/icons/CheckmarkSharp.js");
+require("../../utils/components/icons/CheckmarkCircleOutline.js");
+require("../../utils/components/icons/AlertCircle.js");
+require("../../utils/components/icons/AlertCircleOutline.js");
+require("../../utils/components/icons/InformationCircle.js");
+require("../../utils/components/icons/InformationCircleOutline.js");
+require("../../utils/components/icons/CloseCircle.js");
+var CloseCircleOutline = require("../../utils/components/icons/CloseCircleOutline.js");
+require("../../utils/components/icons/HelpCircleSharp.js");
+require("../../utils/components/icons/EyeOffOutline.js");
+require("../../utils/components/icons/EyeOutline.js");
+require("../../utils/components/icons/LoadingOutlined.js");
+var Close = require("../../utils/components/icons/Close.js");
+require("../../utils/components/icons/CloseOutline.js");
+require("../../utils/components/icons/ArrowsMaximize.js");
+require("../../utils/components/icons/ArrowsMinimize.js");
+require("../../utils/components/icons/AddOutline.js");
+require("../../utils/components/icons/RemoveOutline.js");
+require("../../utils/components/icons/ChevronUp.js");
+var ChevronDown = require("../../utils/components/icons/ChevronDown.js");
+require("../../utils/components/icons/ChevronForward.js");
+require("../../utils/components/icons/ChevronLeft24Filled.js");
+require("../../utils/components/icons/ChevronRight24Filled.js");
+require("../../utils/components/icons/ChevronDoubleLeft16Filled.js");
+require("../../utils/components/icons/ChevronDoubleRight16Filled.js");
+require("../../utils/components/icons/CheckmarkOutline.js");
+require("../../utils/components/icons/IosCheckmark.js");
+require("../../utils/components/icons/Empty.js");
+require("../../utils/components/icons/Bars.js");
+require("../../utils/components/icons/ArrowUpCircle.js");
+require("../../utils/components/icons/ArrowUp.js");
+require("../../utils/components/icons/ArrowForward.js");
+require("../../utils/components/icons/TimeOutline.js");
+require("../../utils/components/icons/CalendarClearOutline.js");
+require("../../utils/components/icons/KeyboardArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardArrowRightRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowRightRound.js");
+require("../../utils/components/icons/MenuFoldOutlined.js");
+require("../../utils/components/icons/IosArrowDown.js");
+require("../../utils/components/icons/IosArrowBack.js");
+require("../../utils/components/icons/IosArrowForward.js");
+require("../../utils/components/icons/ImageSharp.js");
+require("../../utils/components/icons/Pause.js");
+require("../../utils/components/icons/Refresh.js");
+require("../../utils/components/icons/QuestionCircle24Regular.js");
+require("../../utils/components/icons/CloudUploadOutline.js");
+require("../../utils/components/icons/UploadFileFilled.js");
+require("../../utils/components/icons/EllipsisHorizontal.js");
+require("../../utils/components/icons/ArrowNext24Filled.js");
+require("../../utils/components/icons/ArrowPrevious24Filled.js");
+require("../../utils/components/icons/ArrowDropDownSharp.js");
+require("../../utils/components/icons/ArrowDropUpSharp.js");
+require("../../utils/components/icons/ArrowForwardIosFilled.js");
+var useConfig = require("../../utils/hooks/useConfig.js");
+var clickOutside = require("../../utils/directives/click-outside.js");
+var context = require("./context.js");
+const colorPickerProps = {
+  size: type.PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]).def("md"),
+  alpha: type.PropTypes.bool.def(false),
+  readonly: type.PropTypes.bool.def(false),
+  format: {
+    type: Array,
+    default: () => ["HEX", "RGB", "HSL", "HSV"]
+  },
+  disabled: type.PropTypes.bool.def(false),
+  loading: type.PropTypes.bool.def(false),
+  value: type.PropTypes.string,
+  clearable: type.PropTypes.bool.def(true),
+  palette: type.PropTypes.bool.def(true),
+  history: type.PropTypes.bool.def(false),
+  selection: type.PropTypes.bool.def(false),
+  selectionList: {
+    type: Array,
+    default: () => []
+  }
+};
+var ColorPicker = vue.defineComponent({
+  name: "TColorPicker",
+  components: {
+    TPopper: index.TPopper,
+    CloseCircleOutline: CloseCircleOutline["default"],
+    ChevronDown: ChevronDown["default"],
+    Close: Close["default"]
+  },
+  directives: {
+    clickOutside: clickOutside.directive
+  },
+  inheritAttrs: false,
+  props: colorPickerProps,
+  emits: ["update:value", "clear", "change"],
+  setup(props, {
+    emit
+  }) {
+    const currentValue = vue.ref(props.value);
+    const showClear = vue.ref(false);
+    const {
+      prefixCls
+    } = useConfig.useConfig("color-picker", props);
+    const refContent = vue.ref();
+    const focusArr = [vue.ref(), vue.ref()];
+    const visible = vue.ref(false);
+    const refInput = vue.ref();
+    const isFocus = vue.ref(false);
+    const refPopper = vue.ref(null);
+    const refTrigger = vue.ref(null);
+    const handleClickOutside = () => {
+      isFocus.value = false;
+    };
+    const handleClick = () => {
+      isFocus.value = true;
+    };
+    vue.watch(() => props.value, () => {
+      currentValue.value = props.value;
+    }, {
+      deep: true
+    });
+    const emptyClick = (event) => {
+      event.stopPropagation();
+    };
+    const handleClearClick = (event) => {
+      currentValue.value = "";
+      emit("update:value", currentValue.value);
+      emit("change", currentValue.value);
+      emit("clear", event);
+    };
+    const close = () => {
+      visible.value = false;
+    };
+    const submit = (value) => {
+      currentValue.value = value;
+      emit("update:value", currentValue.value);
+      emit("change", currentValue.value);
+      close();
+    };
+    context.provideColorPicker({
+      visible: vue.computed(() => visible.value),
+      close,
+      submit
+    });
+    const render = () => {
+      const contentProps = {
+        readonly: props.readonly,
+        value: props.value,
+        format: props.format,
+        alpha: props.alpha,
+        history: props.history,
+        selectionList: props.selectionList,
+        selection: props.selection,
+        palette: props.palette
+      };
+      const contentElement = vue.createVNode(colorPickerContent["default"], vue.mergeProps({
+        "ref": refContent
+      }, contentProps), null);
+      const inputProps = {
+        type: "text",
+        class: `${prefixCls.value}-input`,
+        onFocus: () => {
+          focusArr[0].value = true;
+          isFocus.value = true;
+        },
+        onBlur: () => {
+          if (!visible.value)
+            isFocus.value = false;
+          focusArr[0].value = false;
+        },
+        onClick: emptyClick
+      };
+      const triggerClasses = vue.computed(() => {
+        const values = [`${prefixCls.value}-trigger`, {
+          [`is-focus`]: isFocus.value,
+          [`is-disabled`]: props.disabled || props.loading,
+          [`is-readonly`]: props.readonly,
+          [`is-open`]: visible.value,
+          [`size-${props.size}`]: props.size
+        }];
+        return values;
+      });
+      const triggerProps = {
+        ref: refTrigger
+      };
+      if (!props.disabled && props.clearable) {
+        triggerProps["onMouseenter"] = () => {
+          if (currentValue.value)
+            showClear.value = true;
+        };
+        triggerProps["onMouseleave"] = () => {
+          showClear.value = false;
+        };
+      }
+      const suffixElement = vue.createVNode("span", {
+        "class": `${prefixCls.value}-suffix`
+      }, [showClear.value && !props.readonly && currentValue.value ? vue.createVNode(vue.resolveComponent("t-icon"), {
+        "class": "is-action",
+        "onClick": handleClearClick
+      }, {
+        default: () => [vue.createVNode(CloseCircleOutline["default"], null, null)]
+      }) : vue.createVNode(vue.resolveComponent("t-icon"), {
+        "class": "is-arrow"
+      }, {
+        default: () => [vue.createVNode(ChevronDown["default"], null, null)]
+      })]);
+      const colorBarStyles = vue.computed(() => {
+        return {
+          backgroundColor: currentValue.value
+        };
+      });
+      const colorBarElement = vue.createVNode("div", {
+        "class": `${prefixCls.value}-trigger-bar`,
+        "style": colorBarStyles.value
+      }, null);
+      const emptyElement = vue.createVNode("div", {
+        "class": `${prefixCls.value}-trigger-bar`
+      }, [vue.createVNode(vue.resolveComponent("t-icon"), null, {
+        default: () => [vue.createVNode(Close["default"], null, null)]
+      })]);
+      const triggerElement = vue.createVNode("label", null, [vue.withDirectives(vue.createVNode("div", null, [vue.createVNode("div", vue.mergeProps({
+        "class": triggerClasses.value
+      }, triggerProps), [currentValue.value ? colorBarElement : emptyElement, suffixElement]), vue.createVNode("input", vue.mergeProps({
+        "ref": refInput
+      }, inputProps, {
+        "inputmode": "none"
+      }), null)]), [[vue.resolveDirective("clickOutside"), handleClickOutside]])]);
+      const inSlots = {
+        trigger: () => triggerElement,
+        content: () => contentElement
+      };
+      const popperProps = {
+        placement: "bottomLeft",
+        trigger: "click",
+        transitionName: "slide-up",
+        sameWidth: false,
+        isToggle: true,
+        disabled: props.disabled || props.readonly,
+        offset: 6,
+        showArrow: false
+      };
+      if (!props.disabled)
+        popperProps[`onClick`] = handleClick;
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("t-popper"), vue.mergeProps({
+        "ref": refPopper,
+        "class": " is-color-picker",
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event
+      }, popperProps), inSlots)]);
+    };
+    return {
+      refInput,
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+exports["default"] = ColorPicker;

package/lib/color-picker/src/context.d.ts

@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+export declare type ColorFormat = 'HEX | RGB | HSL |HSV';
+export interface ColorPickerContext {
+    visible: ComputedRef<boolean>;
+    close: () => void;
+    submit: (value: string) => void;
+}
+export interface Color {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare const ColorPickerContextKey: InjectionKey<ColorPickerContext>;
+declare const provideColorPicker: (data: ColorPickerContext) => void;
+declare const injectColorPicker: () => ColorPickerContext;
+export { injectColorPicker, provideColorPicker };

package/lib/color-picker/src/context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+const ColorPickerContextKey = Symbol("ColorPickerContextKey");
+const provideColorPicker = (data) => {
+  vue.provide(ColorPickerContextKey, data);
+};
+const injectColorPicker = () => {
+  return vue.inject(ColorPickerContextKey);
+};
+exports.ColorPickerContextKey = ColorPickerContextKey;
+exports.injectColorPicker = injectColorPicker;
+exports.provideColorPicker = provideColorPicker;

package/lib/components.d.ts

@@ -0,0 +1,59 @@
+export * from './config-provider';
+export * from './icon';
+export * from './link';
+export * from './button';
+export * from './form';
+export * from './input';
+export * from './input-number';
+export * from './textarea';
+export * from './radio';
+export * from './checkbox';
+export * from './switch';
+export * from './select';
+export * from './cascader';
+export * from './tree-select';
+export * from './time-picker';
+export * from './date-picker';
+export * from './color-picker';
+export * from './slider';
+export * from './upload';
+export * from './popper';
+export * from './popover';
+export * from './tooltip';
+export * from './popconfirm';
+export * from './alert';
+export * from './message';
+export * from './notification';
+export * from './modal';
+export * from './message-box';
+export * from './drawer';
+export * from './loading';
+export * from './skeleton';
+export * from './status';
+export * from './progress';
+export * from './table';
+export * from './empty';
+export * from './avatar';
+export * from './badge';
+export * from './tag';
+export * from './tree';
+export * from './cascader-panel';
+export * from './calendar';
+export * from './carousel';
+export * from './affix';
+export * from './anchor';
+export * from './back-top';
+export * from './loading-bar';
+export * from './dropdown';
+export * from './menu';
+export * from './breadcrumb';
+export * from './tabs';
+export * from './steps';
+export * from './pagination';
+export * from './divider';
+export * from './layout';
+export * from './line-grid';
+export * from './grid';
+export * from './space';
+export * from './card';
+export * from './list';

package/lib/components.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var index = require("./config-provider/index.js");
+var index$1 = require("./icon/index.js");
+var index$2 = require("./link/index.js");
+var index$3 = require("./button/index.js");
+var index$4 = require("./form/index.js");
+var index$5 = require("./input/index.js");
+var index$6 = require("./input-number/index.js");
+var index$7 = require("./textarea/index.js");
+var index$8 = require("./radio/index.js");
+var index$9 = require("./checkbox/index.js");
+var index$a = require("./switch/index.js");
+var index$b = require("./select/index.js");
+var index$c = require("./cascader/index.js");
+var index$d = require("./tree-select/index.js");
+var index$e = require("./time-picker/index.js");
+var index$f = require("./date-picker/index.js");
+var index$g = require("./color-picker/index.js");
+var index$h = require("./slider/index.js");
+var index$i = require("./upload/index.js");
+var index$j = require("./popper/index.js");
+var index$k = require("./popover/index.js");
+var index$l = require("./tooltip/index.js");
+var index$m = require("./popconfirm/index.js");
+var index$n = require("./alert/index.js");
+var index$o = require("./message/index.js");
+var index$p = require("./notification/index.js");
+var index$q = require("./modal/index.js");
+var index$r = require("./message-box/index.js");
+var index$s = require("./drawer/index.js");
+var index$t = require("./loading/index.js");
+var index$u = require("./skeleton/index.js");
+var index$v = require("./status/index.js");
+var index$w = require("./progress/index.js");
+var index$x = require("./table/index.js");
+var index$y = require("./empty/index.js");
+var index$z = require("./avatar/index.js");
+var index$A = require("./badge/index.js");
+var index$B = require("./tag/index.js");
+var index$C = require("./tree/index.js");
+var index$D = require("./cascader-panel/index.js");
+var index$E = require("./calendar/index.js");
+var index$F = require("./carousel/index.js");
+var index$G = require("./affix/index.js");
+var index$H = require("./anchor/index.js");
+var index$I = require("./back-top/index.js");
+var index$J = require("./loading-bar/index.js");
+var index$K = require("./dropdown/index.js");
+var index$L = require("./menu/index.js");
+var index$M = require("./breadcrumb/index.js");
+var index$N = require("./tabs/index.js");
+var index$O = require("./steps/index.js");
+var index$P = require("./pagination/index.js");
+var index$Q = require("./divider/index.js");
+var index$R = require("./layout/index.js");
+var index$S = require("./line-grid/index.js");
+var index$T = require("./grid/index.js");
+var index$U = require("./space/index.js");
+var index$V = require("./card/index.js");
+var index$W = require("./list/index.js");
+exports.TConfigProvider = index.TConfigProvider;
+exports.TIcon = index$1.TIcon;
+exports.TLink = index$2.TLink;
+exports.TButton = index$3.TButton;
+exports.TForm = index$4.TForm;
+exports.TFormItem = index$4.TFormItem;
+exports.TInput = index$5.TInput;
+exports.TInputNumber = index$6.TInputNumber;
+exports.TTextarea = index$7.TTextarea;
+exports.TRadio = index$8.TRadio;
+exports.TRadioGroup = index$8.TRadioGroup;
+exports.TCheckbox = index$9.TCheckbox;
+exports.TCheckboxGroup = index$9.TCheckboxGroup;
+exports.TSwitch = index$a.TSwitch;
+exports.TSelect = index$b.TSelect;
+exports.TSelectGroup = index$b.TSelectGroup;
+exports.TSelectOption = index$b.TSelectOption;
+exports.TCascader = index$c.TCascader;
+exports.TTreeSelect = index$d.TTreeSelect;
+exports.TTimePicker = index$e.TTimePicker;
+exports.TDatePicker = index$f.TDatePicker;
+exports.TColorPicker = index$g.TColorPicker;
+exports.TSlider = index$h.TSlider;
+exports.TUpload = index$i.TUpload;
+exports.TPopper = index$j.TPopper;
+exports.TPopover = index$k.TPopover;
+exports.TTooltip = index$l.TTooltip;
+exports.TPopconfirm = index$m.TPopconfirm;
+exports.TAlert = index$n.TAlert;
+exports.TMessage = index$o.TMessage;
+exports.TNotification = index$p.TNotification;
+exports.TModal = index$q.TModal;
+exports.TMessageBox = index$r.TMessageBox;
+exports.TDrawer = index$s.TDrawer;
+exports.TLoading = index$t.TLoading;
+exports.TSkeleton = index$u.TSkeleton;
+exports.TSkeletonItem = index$u.TSkeletonItem;
+exports.TStatus = index$v.TStatus;
+exports.TProgress = index$w.TProgress;
+exports.TTable = index$x.TTable;
+exports.TEmpty = index$y.TEmpty;
+exports.TAvatar = index$z.TAvatar;
+exports.TBadge = index$A.TBadge;
+exports.TTag = index$B.TTag;
+exports.TTree = index$C.TTree;
+exports.TCascaderPanel = index$D.TCascaderPanel;
+exports.TCalendar = index$E.TCalendar;
+exports.TCarousel = index$F.TCarousel;
+exports.TAffix = index$G.TAffix;
+exports.TAnchor = index$H.TAnchor;
+exports.TAnchorLink = index$H.TAnchorLink;
+exports.TBackTop = index$I.TBackTop;
+exports.TLoadingBar = index$J.TLoadingBar;
+exports.TDropdown = index$K.TDropdown;
+exports.TDropdownGroup = index$K.TDropdownGroup;
+exports.TDropdownItem = index$K.TDropdownItem;
+exports.TMenu = index$L.TMenu;
+exports.TMenuGroup = index$L.TMenuGroup;
+exports.TMenuItem = index$L.TMenuItem;
+exports.TBreadcrumb = index$M.TBreadcrumb;
+exports.TBreadcrumbItem = index$M.TBreadcrumbItem;
+exports.TTab = index$N.TTab;
+exports.TTabs = index$N.TTabs;
+exports.TStep = index$O.TStep;
+exports.TSteps = index$O.TSteps;
+exports.TPagination = index$P.TPagination;
+exports.TDivider = index$Q.TDivider;
+exports.TLayout = index$R.TLayout;
+exports.TLayoutContent = index$R.TLayoutContent;
+exports.TLayoutFooter = index$R.TLayoutFooter;
+exports.TLayoutHeader = index$R.TLayoutHeader;
+exports.TLayoutSider = index$R.TLayoutSider;
+exports.TCol = index$S.TCol;
+exports.TFlex = index$S.TFlex;
+exports.TRow = index$S.TRow;
+exports.TGrid = index$T.TGrid;
+exports.TGridCol = index$T.TGridCol;
+exports.TSpace = index$U.TSpace;
+exports.TCard = index$V.TCard;
+exports.TList = index$W.TList;
+exports.TListItem = index$W.TListItem;