yc-design-vue 1.0.1

package/es/Select/type.d.ts

@@ -0,0 +1,118 @@
+import { ObjectData, RenderContent, Size, PopupContainer } from '../_shared/type';
+import { TriggerInstance, TriggerProps } from '../Trigger';
+import { TagProps } from '../Tag';
+export interface SelectProps {
+    multiple?: boolean;
+    modelValue?: SelectValue;
+    defaultValue?: SelectValue;
+    inputValue?: string;
+    defaultInputValue?: string;
+    size?: Size;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    allowClear?: boolean;
+    allowSearch?: boolean;
+    allowCreate?: boolean;
+    maxTagCount?: number;
+    popupContainer?: PopupContainer;
+    bordered?: boolean;
+    defaultActivefirstOption?: boolean;
+    popupVisible?: boolean;
+    defaultPopupVisible?: boolean;
+    unmountonClose?: boolean;
+    filterOption?: FilterOption;
+    options?: SelectOptions;
+    virtualListProps?: VirtualListProps;
+    triggerProps?: TriggerProps;
+    formatLabel?: FormatLabel;
+    fallbackOption?: FallbackOption;
+    showExtraOptions?: boolean;
+    valueKey?: string;
+    searchDelay?: number;
+    limit?: number;
+    fieldNames?: Record<string, string>;
+    scrollbar?: boolean;
+    showHeaderOnEmpty?: boolean;
+    showFooterOnEmpty?: boolean;
+    tagNowrap?: boolean;
+    hotkeys?: boolean;
+    showEmpty?: boolean;
+}
+export interface SelectEmits {
+    (e: 'update:modelValue', value: SelectValue): void;
+    (e: 'update:inputValue', value: SelectValue): void;
+    (e: 'update:popupVisible', value: boolean): void;
+    (e: 'change', value: SelectValue): void;
+    (e: 'input-value-change', value: string): void;
+    (e: 'clear'): void;
+    (e: 'remove', index: number | string, ev: Event): void;
+    (e: 'search', value: string): void;
+    (e: 'exceedLimit', value: SelectValue, ev?: MouseEvent): void;
+    (e: 'popup-visible-change', value: boolean): void;
+    (e: 'dropdown-scroll', ev: Event): void;
+    (e: 'dropdown-reach-bottom', ev: Event): void;
+    (e: 'select', value: SelectValue): void;
+}
+export interface SelectSlots {
+    default(): void;
+    trigger(): void;
+    prefix(): void;
+    ['search-icon'](): void;
+    ['loading-icon'](): void;
+    ['arrow-icon'](): void;
+    footer(): void;
+    header(): void;
+    label(scope: {
+        data: ObjectData;
+    }): void;
+    option(scope: {
+        data: ObjectData;
+    }): void;
+    empty(): void;
+}
+export interface SelectExpose {
+    focus(): void;
+    blur(): void;
+    getPopupRef(): TriggerInstance;
+}
+export interface OptionProps {
+    label?: string;
+    value?: SelectValue;
+    disabled?: boolean;
+    tagProps?: TagProps;
+    id?: string;
+    isFallbackOption?: boolean;
+}
+export interface OptionSlots {
+    default(): void;
+    icon(): void;
+    suffix(): void;
+}
+export interface OptgroupProps {
+    label?: string;
+}
+export interface OptgroupSlots {
+    default(): void;
+    label(): void;
+}
+export type SelectValue = (string | number | boolean | ObjectData) | (string | number | boolean | ObjectData)[];
+export type SelectOptionData = {
+    render?: RenderContent;
+} & OptionProps;
+export type SelectOptionGroup = {
+    id?: string;
+    label?: string;
+    isGroup?: true;
+    options?: SelectOptionData[];
+};
+export type SelectOptions = (SelectValue | SelectOptionData | SelectOptionGroup | ObjectData)[];
+export type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);
+export type FallbackOption = (value: SelectValue) => SelectOptionData;
+export type FormatLabel = (data: SelectOptionData) => string;
+export type VirtualListProps = {
+    itemHeight?: number;
+    buffer?: number;
+    threshold?: number;
+};

package/es/Skeleton/Skeleton.vue.d.ts

@@ -0,0 +1,19 @@
+import { SkeletonProps, SkeletonSlots } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<SkeletonSlots> & SkeletonSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkeletonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    loading: boolean;
+    animation: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Skeleton/Skeleton.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent, toRefs, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Skeleton"
+  },
+  __name: "Skeleton",
+  props: {
+    animation: { type: Boolean, default: false },
+    loading: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { animation, loading } = toRefs(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-skeleton",
+          {
+            "yc-skeleton-animation": unref(animation)
+          }
+        ])
+      }, [
+        renderSlot(_ctx.$slots, unref(loading) ? "default" : "content")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Skeleton/Skeleton.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./Skeleton.vue.js";
+export {
+  _sfc_main as default
+};

package/es/Skeleton/SkeletonLine.vue.d.ts

@@ -0,0 +1,8 @@
+import { SkeletonLineProps } from './type';
+declare const _default: import('vue').DefineComponent<SkeletonLineProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonLineProps> & Readonly<{}>, {
+    rows: number;
+    lineHeight: number;
+    widths: number[];
+    lineSpacing: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/Skeleton/SkeletonLine.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./SkeletonLine.vue2.js";
+/* empty css                  */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const SkeletonLine = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-963b904e"]]);
+export {
+  SkeletonLine as default
+};

package/es/Skeleton/SkeletonLine.vue2.js

@@ -0,0 +1,46 @@
+import { defineComponent, toRefs, computed, createElementBlock, openBlock, normalizeStyle, Fragment, renderList, unref } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { valueToPx } from "../_shared/utils/fn.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                         */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkeletonLine"
+  },
+  __name: "SkeletonLine",
+  props: {
+    rows: { default: 1 },
+    widths: { default: () => [] },
+    lineHeight: { default: 20 },
+    lineSpacing: { default: 15 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { lineSpacing } = toRefs(props);
+    const gap = computed(() => valueToPx(lineSpacing.value));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "yc-skeleton-line",
+        style: normalizeStyle({
+          gap: gap.value
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (i) => {
+          return openBlock(), createElementBlock("div", {
+            class: "yc-skeleton-line-row",
+            key: i,
+            style: normalizeStyle({
+              height: unref(valueToPx)(_ctx.lineHeight),
+              width: _ctx.widths[i] ? unref(valueToPx)(_ctx.widths[i]) : "100%"
+            })
+          }, null, 4);
+        }), 128))
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Skeleton/SkeletonShape.vue.d.ts

@@ -0,0 +1,6 @@
+import { SkeletonShapeProps } from './type';
+declare const _default: import('vue').DefineComponent<SkeletonShapeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonShapeProps> & Readonly<{}>, {
+    size: import('./type').SkeletonShapeSize;
+    shape: import('./type').SkeletonShapeShape;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/Skeleton/SkeletonShape.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./SkeletonShape.vue2.js";
+/* empty css                   */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const SkeletonShape = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24b69272"]]);
+export {
+  SkeletonShape as default
+};

package/es/Skeleton/SkeletonShape.vue2.js

@@ -0,0 +1,31 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getGlobalConfig } from "../_shared/utils/global-config.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkeletonShape"
+  },
+  __name: "SkeletonShape",
+  props: {
+    shape: { default: "sqaure" },
+    size: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { size } = getGlobalConfig(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-skeleton-shape",
+          `yc-skeleton-shape-shape-${_ctx.shape}`,
+          `yc-skeleton-shape-size-${unref(size)}`
+        ])
+      }, null, 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Skeleton/index.d.ts

@@ -0,0 +1,53 @@
+import { App } from 'vue';
+import { default as _Skeleton } from './Skeleton.vue';
+import { default as _SkeletonShape } from './SkeletonShape.vue';
+import { default as _SkeletonLine } from './SkeletonLine.vue';
+export type SkeletonInstance = InstanceType<typeof _Skeleton>;
+export type SkeletonShapeInstance = InstanceType<typeof _SkeletonShape>;
+export type SkeletonLineInstance = InstanceType<typeof _SkeletonLine>;
+export * from './type';
+declare const Skeleton: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./type').SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        loading: boolean;
+        animation: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./type').SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, {
+        loading: boolean;
+        animation: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./type').SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    loading: boolean;
+    animation: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<import('./type').SkeletonSlots> & import('./type').SkeletonSlots;
+}) & {
+    shape: import('vue').DefineComponent<import('./type').SkeletonShapeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./type').SkeletonShapeProps> & Readonly<{}>, {
+        size: import('./type').SkeletonShapeSize;
+        shape: import('./type').SkeletonShapeShape;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    line: import('vue').DefineComponent<import('./type').SkeletonLineProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./type').SkeletonLineProps> & Readonly<{}>, {
+        rows: number;
+        lineHeight: number;
+        widths: number[];
+        lineSpacing: number;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    install: (app: App) => void;
+};
+export { _SkeletonShape as SkeletonShape, _SkeletonLine as SkeletonLine };
+declare module 'vue' {
+    interface GlobalComponents {
+        YcSkeleton: typeof Skeleton;
+        YcSkeletonShape: typeof _SkeletonShape;
+        YcSkeletonLine: typeof _SkeletonLine;
+    }
+}
+export default Skeleton;

package/es/Skeleton/index.js

@@ -0,0 +1,17 @@
+import _sfc_main from "./Skeleton.vue.js";
+import SkeletonShape from "./SkeletonShape.vue.js";
+import SkeletonLine from "./SkeletonLine.vue.js";
+const Skeleton = Object.assign(_sfc_main, {
+  shape: SkeletonShape,
+  line: SkeletonLine,
+  install: (app) => {
+    app.component("Yc" + _sfc_main.name, _sfc_main);
+    app.component("Yc" + SkeletonShape.name, SkeletonShape);
+    app.component("Yc" + SkeletonLine.name, SkeletonLine);
+  }
+});
+export {
+  SkeletonLine,
+  SkeletonShape,
+  Skeleton as default
+};

package/es/Skeleton/type.d.ts

@@ -0,0 +1,20 @@
+export interface SkeletonProps {
+    animation?: boolean;
+    loading?: boolean;
+}
+export interface SkeletonSlots {
+    default(): void;
+    content(): void;
+}
+export interface SkeletonLineProps {
+    rows?: number;
+    widths?: number[];
+    lineHeight?: number;
+    lineSpacing?: number;
+}
+export interface SkeletonShapeProps {
+    shape?: SkeletonShapeShape;
+    size?: SkeletonShapeSize;
+}
+export type SkeletonShapeSize = 'small' | 'medium' | 'large';
+export type SkeletonShapeShape = 'sqaure' | 'circle';

package/es/Slider/Slider.vue.d.ts

@@ -0,0 +1,25 @@
+import { SliderProps } from './type';
+declare const _default: import('vue').DefineComponent<SliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: number) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<SliderProps> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    range: boolean;
+    showTooltip: boolean;
+    step: number;
+    direction: import('..').Direction;
+    modelValue: import('./type').SliderValue;
+    defaultValue: import('./type').SliderValue;
+    showInput: boolean;
+    max: number;
+    min: number;
+    marks: Record<number, string>;
+    showTicks: boolean;
+    formatTooltip: import('./type').FormatTooltip;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    trackRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/es/Slider/Slider.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./Slider.vue2.js";
+/* empty css            */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-66ebd5c2"]]);
+export {
+  _Slider as default
+};

package/es/Slider/Slider.vue2.js

@@ -0,0 +1,145 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, createBlock, createVNode, normalizeStyle } from "vue";
+import useContext from "./hooks/useContext.js";
+import SliderTicks from "./SliderTicks.vue.js";
+import SliderBtn from "./SliderBtn.vue.js";
+import SliderInput from "./SliderInput.vue.js";
+const _hoisted_1 = ["aria-disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "yc-slider-input"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "yc-slider-input-divider"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Slider"
+  },
+  __name: "Slider",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: 0 },
+    step: { default: 1 },
+    min: { default: 0 },
+    marks: { default: () => {
+      return {};
+    } },
+    max: { default: 100 },
+    direction: { default: "horizontal" },
+    disabled: { type: Boolean, default: false },
+    showTicks: { type: Boolean, default: false },
+    showInput: { type: Boolean, default: false },
+    range: { type: Boolean, default: false },
+    showTooltip: { type: Boolean, default: true },
+    formatTooltip: { type: Function, default: (val) => {
+      return val + "";
+    } }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const trackRef = ref();
+    const { ticks, marks, range, direction, min, normalizeValue } = useContext().provide(props, emits, trackRef);
+    const startPosition = ref({
+      bottom: 0,
+      left: 0,
+      top: 0,
+      right: 0
+    });
+    const endPosition = ref({
+      bottom: 0,
+      left: 0,
+      top: 0,
+      right: 0
+    });
+    const position = computed(() => {
+      const { left, right, top, bottom } = startPosition.value;
+      if (!range.value) {
+        return direction.value == "vertical" ? {
+          top: top + "%",
+          bottom: normalizeValue(min.value) + "%"
+        } : {
+          left: normalizeValue(min.value) + "%",
+          right: right + "%"
+        };
+      }
+      const {
+        left: left1,
+        right: right1,
+        top: top1,
+        bottom: bottom1
+      } = endPosition.value;
+      return direction.value == "vertical" ? {
+        top: `${top < top1 ? top : top1}%`,
+        bottom: `${bottom < bottom1 ? bottom : bottom1}%`
+      } : {
+        left: `${left < left1 ? left : left1}%`,
+        right: `${right < right1 ? right : right1}%`
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-slider",
+          `yc-slider-direction-${unref(direction)}`,
+          {
+            "yc-slider-disabled": _ctx.disabled
+          }
+        ])
+      }, [
+        createElementVNode("div", {
+          class: "yc-slider-track",
+          ref_key: "trackRef",
+          ref: trackRef
+        }, [
+          _ctx.showTicks ? (openBlock(), createBlock(SliderTicks, {
+            key: 0,
+            type: "ticks",
+            data: unref(ticks)
+          }, null, 8, ["data"])) : createCommentVNode("", true),
+          unref(marks).length ? (openBlock(), createBlock(SliderTicks, {
+            key: 1,
+            type: "dots",
+            data: unref(marks)
+          }, null, 8, ["data"])) : createCommentVNode("", true),
+          unref(marks).length ? (openBlock(), createBlock(SliderTicks, {
+            key: 2,
+            type: "marks",
+            data: unref(marks)
+          }, null, 8, ["data"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: "yc-slider-bar",
+            role: "slider",
+            tabindex: "0",
+            "aria-disabled": _ctx.disabled,
+            style: normalizeStyle(position.value)
+          }, null, 12, _hoisted_1),
+          createVNode(SliderBtn, {
+            position: startPosition.value,
+            "onUpdate:position": _cache[0] || (_cache[0] = ($event) => startPosition.value = $event),
+            type: "start"
+          }, null, 8, ["position"]),
+          unref(range) ? (openBlock(), createBlock(SliderBtn, {
+            key: 3,
+            position: endPosition.value,
+            "onUpdate:position": _cache[1] || (_cache[1] = ($event) => endPosition.value = $event),
+            type: "end"
+          }, null, 8, ["position"])) : createCommentVNode("", true)
+        ], 512),
+        _ctx.showInput ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(SliderInput, { type: "start" }),
+          unref(range) ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
+          unref(range) ? (openBlock(), createBlock(SliderInput, {
+            key: 1,
+            type: "end"
+          })) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Slider/SliderBtn.vue.d.ts

@@ -0,0 +1,13 @@
+import { PositionData } from './hooks/useSliderDraggable';
+type __VLS_Props = {
+    type: 'start' | 'end';
+    position: PositionData;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:position": (value: PositionData) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:position"?: ((value: PositionData) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    triggerRef: HTMLDivElement;
+}, any>;
+export default _default;

package/es/Slider/SliderBtn.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./SliderBtn.vue2.js";
+/* empty css               */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const SliderBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9135a42c"]]);
+export {
+  SliderBtn as default
+};