@cck-ui/core 0.2.0 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/button/button-group/button-group.cjs +1 -1
- package/cjs/components/button/button-group/button-group.cjs.map +1 -1
- package/cjs/components/button/button-group/use-button-group.cjs +2 -1
- package/cjs/components/button/button-group/use-button-group.cjs.map +1 -1
- package/cjs/components/button/button-group-section/button-group-section.cjs +1 -1
- package/cjs/components/button/button-group-section/button-group-section.cjs.map +1 -1
- package/cjs/components/button/button.cjs +99 -68
- package/cjs/components/button/button.cjs.map +1 -1
- package/cjs/components/button/button.module.cjs.map +1 -1
- package/cjs/components/grid/col/col-custom.cjs +2 -3
- package/cjs/components/grid/col/col-custom.cjs.map +1 -1
- package/cjs/components/grid/col/col.cjs +31 -23
- package/cjs/components/grid/col/col.cjs.map +1 -1
- package/cjs/components/grid/grid-custom.cjs +2 -3
- package/cjs/components/grid/grid-custom.cjs.map +1 -1
- package/cjs/components/grid/grid.cjs +50 -38
- package/cjs/components/grid/grid.cjs.map +1 -1
- package/cjs/components/group/group.cjs +1 -1
- package/cjs/components/group/group.cjs.map +1 -1
- package/cjs/components/loader/loader.cjs +44 -36
- package/cjs/components/loader/loader.cjs.map +1 -1
- package/cjs/components/loader/loaders/bars.cjs +1 -1
- package/cjs/components/loader/loaders/bars.cjs.map +1 -1
- package/cjs/components/loader/loaders/dots.cjs +1 -1
- package/cjs/components/loader/loaders/dots.cjs.map +1 -1
- package/cjs/components/loader/loaders/oval.cjs +1 -1
- package/cjs/components/loader/loaders/oval.cjs.map +1 -1
- package/cjs/components/simple-grid/simple-grid-custom.cjs +2 -3
- package/cjs/components/simple-grid/simple-grid-custom.cjs.map +1 -1
- package/cjs/components/simple-grid/simple-grid.cjs +35 -30
- package/cjs/components/simple-grid/simple-grid.cjs.map +1 -1
- package/cjs/components/text/text.cjs +50 -43
- package/cjs/components/text/text.cjs.map +1 -1
- package/cjs/components/text/text.module.cjs.map +1 -1
- package/cjs/components/transition/get-transition-props/get-transition-props.cjs +17 -0
- package/cjs/components/transition/get-transition-props/get-transition-props.cjs.map +1 -0
- package/cjs/components/transition/get-transition-styles/get-transition-styles.cjs +37 -0
- package/cjs/components/transition/get-transition-styles/get-transition-styles.cjs.map +1 -0
- package/cjs/components/transition/index.cjs +14 -0
- package/cjs/components/transition/index.cjs.map +1 -0
- package/cjs/components/transition/transition.cjs +140 -0
- package/cjs/components/transition/transition.cjs.map +1 -0
- package/cjs/components/transition/transitions.cjs +220 -0
- package/cjs/components/transition/transitions.cjs.map +1 -0
- package/cjs/components/transition/use-transition.cjs +84 -0
- package/cjs/components/transition/use-transition.cjs.map +1 -0
- package/cjs/components/unstyled-button/unstyled-button.cjs +32 -22
- package/cjs/components/unstyled-button/unstyled-button.cjs.map +1 -1
- package/cjs/core/box/box.cjs +40 -46
- package/cjs/core/box/box.cjs.map +1 -1
- package/cjs/core/box/get-box-mod/get-box-mod.cjs.map +1 -1
- package/cjs/core/box/style-props/parse-style-props/parse-style-props.cjs +1 -1
- package/cjs/core/box/style-props/parse-style-props/parse-style-props.cjs.map +1 -1
- package/cjs/core/config-provider/baseline.cjs +1 -0
- package/cjs/core/config-provider/cck-css-variables/default-css-variables-resolver.cjs +138 -0
- package/cjs/core/config-provider/cck-css-variables/default-css-variables-resolver.cjs.map +1 -0
- package/cjs/core/config-provider/cck-css-variables/get-css-color-variables.cjs +64 -0
- package/cjs/core/config-provider/cck-css-variables/get-css-color-variables.cjs.map +1 -0
- package/cjs/core/config-provider/cck-css-variables/virtual-color/virtual-color.cjs +39 -0
- package/cjs/core/config-provider/cck-css-variables/virtual-color/virtual-color.cjs.map +1 -0
- package/cjs/core/config-provider/color-functions/colors-tuple/colors-tuple.cjs +10 -0
- package/cjs/core/config-provider/color-functions/colors-tuple/colors-tuple.cjs.map +1 -0
- package/cjs/core/config-provider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.cjs +22 -0
- package/cjs/core/config-provider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.cjs.map +1 -1
- package/cjs/core/config-provider/color-functions/get-contrast-color/get-contrast-color.cjs +39 -0
- package/cjs/core/config-provider/color-functions/get-contrast-color/get-contrast-color.cjs.map +1 -0
- package/cjs/core/config-provider/color-functions/parse-theme-color/parse-theme-color.cjs.map +1 -1
- package/cjs/core/config-provider/color-scheme-managers/is-cck-color-scheme.cjs +9 -0
- package/cjs/core/config-provider/color-scheme-managers/is-cck-color-scheme.cjs.map +1 -0
- package/cjs/core/config-provider/color-scheme-managers/local-storage-manager.cjs +40 -0
- package/cjs/core/config-provider/color-scheme-managers/local-storage-manager.cjs.map +1 -0
- package/cjs/core/config-provider/config-provider.cjs +65 -11
- package/cjs/core/config-provider/config-provider.cjs.map +1 -1
- package/cjs/core/config-provider/config-provider.context.cjs +5 -0
- package/cjs/core/config-provider/config-provider.context.cjs.map +1 -1
- package/cjs/core/config-provider/config-provider.types.cjs +1 -1
- package/cjs/core/config-provider/config-provider.types.cjs.map +1 -1
- package/cjs/core/config-provider/create-theme/create-theme.cjs +8 -0
- package/cjs/core/config-provider/create-theme/create-theme.cjs.map +1 -0
- package/cjs/core/config-provider/default-css-variables.cjs +1 -0
- package/cjs/core/config-provider/global.cjs +1 -0
- package/cjs/core/config-provider/index.cjs +18 -2
- package/cjs/core/config-provider/index.cjs.map +1 -1
- package/cjs/core/config-provider/merge-cck-theme/merge-cck-theme.cjs +35 -0
- package/cjs/core/config-provider/merge-cck-theme/merge-cck-theme.cjs.map +1 -0
- package/cjs/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.cjs +84 -0
- package/cjs/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.cjs.map +1 -0
- package/cjs/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.cjs +59 -0
- package/cjs/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.cjs.map +1 -0
- package/cjs/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.cjs +14 -0
- package/cjs/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.cjs.map +1 -0
- package/cjs/core/styles-api/use-styles/use-styles.cjs +1 -4
- package/cjs/core/styles-api/use-styles/use-styles.cjs.map +1 -1
- package/cjs/index.cjs +39 -17
- package/esm/components/button/button-group/button-group.mjs +1 -1
- package/esm/components/button/button-group/button-group.mjs.map +1 -1
- package/esm/components/button/button-group/use-button-group.mjs +2 -1
- package/esm/components/button/button-group/use-button-group.mjs.map +1 -1
- package/esm/components/button/button-group-section/button-group-section.mjs +1 -1
- package/esm/components/button/button-group-section/button-group-section.mjs.map +1 -1
- package/esm/components/button/button.mjs +100 -69
- package/esm/components/button/button.mjs.map +1 -1
- package/esm/components/button/button.module.mjs.map +1 -1
- package/esm/components/grid/col/col-custom.mjs +3 -4
- package/esm/components/grid/col/col-custom.mjs.map +1 -1
- package/esm/components/grid/col/col.mjs +32 -24
- package/esm/components/grid/col/col.mjs.map +1 -1
- package/esm/components/grid/grid-custom.mjs +3 -4
- package/esm/components/grid/grid-custom.mjs.map +1 -1
- package/esm/components/grid/grid.mjs +51 -39
- package/esm/components/grid/grid.mjs.map +1 -1
- package/esm/components/group/group.mjs +1 -1
- package/esm/components/group/group.mjs.map +1 -1
- package/esm/components/loader/loader.mjs +43 -35
- package/esm/components/loader/loader.mjs.map +1 -1
- package/esm/components/loader/loaders/bars.mjs +1 -1
- package/esm/components/loader/loaders/bars.mjs.map +1 -1
- package/esm/components/loader/loaders/dots.mjs +1 -1
- package/esm/components/loader/loaders/dots.mjs.map +1 -1
- package/esm/components/loader/loaders/oval.mjs +1 -1
- package/esm/components/loader/loaders/oval.mjs.map +1 -1
- package/esm/components/simple-grid/simple-grid-custom.mjs +3 -4
- package/esm/components/simple-grid/simple-grid-custom.mjs.map +1 -1
- package/esm/components/simple-grid/simple-grid.mjs +35 -30
- package/esm/components/simple-grid/simple-grid.mjs.map +1 -1
- package/esm/components/text/text.mjs +50 -43
- package/esm/components/text/text.mjs.map +1 -1
- package/esm/components/text/text.module.mjs.map +1 -1
- package/esm/components/transition/get-transition-props/get-transition-props.mjs +17 -0
- package/esm/components/transition/get-transition-props/get-transition-props.mjs.map +1 -0
- package/esm/components/transition/get-transition-styles/get-transition-styles.mjs +37 -0
- package/esm/components/transition/get-transition-styles/get-transition-styles.mjs.map +1 -0
- package/esm/components/transition/index.mjs +11 -0
- package/esm/components/transition/index.mjs.map +1 -0
- package/esm/components/transition/transition.mjs +140 -0
- package/esm/components/transition/transition.mjs.map +1 -0
- package/esm/components/transition/transitions.mjs +220 -0
- package/esm/components/transition/transitions.mjs.map +1 -0
- package/esm/components/transition/use-transition.mjs +84 -0
- package/esm/components/transition/use-transition.mjs.map +1 -0
- package/esm/components/unstyled-button/unstyled-button.mjs +33 -23
- package/esm/components/unstyled-button/unstyled-button.mjs.map +1 -1
- package/esm/core/box/box.mjs +41 -47
- package/esm/core/box/box.mjs.map +1 -1
- package/esm/core/box/get-box-mod/get-box-mod.mjs.map +1 -1
- package/esm/core/box/style-props/parse-style-props/parse-style-props.mjs +1 -1
- package/esm/core/box/style-props/parse-style-props/parse-style-props.mjs.map +1 -1
- package/esm/core/config-provider/baseline.mjs +1 -0
- package/esm/core/config-provider/cck-css-variables/default-css-variables-resolver.mjs +138 -0
- package/esm/core/config-provider/cck-css-variables/default-css-variables-resolver.mjs.map +1 -0
- package/esm/core/config-provider/cck-css-variables/get-css-color-variables.mjs +64 -0
- package/esm/core/config-provider/cck-css-variables/get-css-color-variables.mjs.map +1 -0
- package/esm/core/config-provider/cck-css-variables/virtual-color/virtual-color.mjs +38 -0
- package/esm/core/config-provider/cck-css-variables/virtual-color/virtual-color.mjs.map +1 -0
- package/esm/core/config-provider/color-functions/colors-tuple/colors-tuple.mjs +10 -0
- package/esm/core/config-provider/color-functions/colors-tuple/colors-tuple.mjs.map +1 -0
- package/esm/core/config-provider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs +22 -0
- package/esm/core/config-provider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs.map +1 -1
- package/esm/core/config-provider/color-functions/get-contrast-color/get-contrast-color.mjs +37 -0
- package/esm/core/config-provider/color-functions/get-contrast-color/get-contrast-color.mjs.map +1 -0
- package/esm/core/config-provider/color-functions/parse-theme-color/parse-theme-color.mjs.map +1 -1
- package/esm/core/config-provider/color-scheme-managers/is-cck-color-scheme.mjs +9 -0
- package/esm/core/config-provider/color-scheme-managers/is-cck-color-scheme.mjs.map +1 -0
- package/esm/core/config-provider/color-scheme-managers/local-storage-manager.mjs +40 -0
- package/esm/core/config-provider/color-scheme-managers/local-storage-manager.mjs.map +1 -0
- package/esm/core/config-provider/config-provider.context.mjs +7 -3
- package/esm/core/config-provider/config-provider.context.mjs.map +1 -1
- package/esm/core/config-provider/config-provider.mjs +66 -12
- package/esm/core/config-provider/config-provider.mjs.map +1 -1
- package/esm/core/config-provider/config-provider.types.mjs +1 -1
- package/esm/core/config-provider/config-provider.types.mjs.map +1 -1
- package/esm/core/config-provider/create-theme/create-theme.mjs +8 -0
- package/esm/core/config-provider/create-theme/create-theme.mjs.map +1 -0
- package/esm/core/config-provider/default-css-variables.mjs +1 -0
- package/esm/core/config-provider/global.mjs +1 -0
- package/esm/core/config-provider/index.mjs +10 -3
- package/esm/core/config-provider/index.mjs.map +1 -1
- package/esm/core/config-provider/merge-cck-theme/merge-cck-theme.mjs +32 -0
- package/esm/core/config-provider/merge-cck-theme/merge-cck-theme.mjs.map +1 -0
- package/esm/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.mjs +84 -0
- package/esm/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.mjs.map +1 -0
- package/esm/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.mjs +59 -0
- package/esm/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.mjs.map +1 -0
- package/esm/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.mjs +14 -0
- package/esm/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.mjs.map +1 -0
- package/esm/core/styles-api/use-styles/use-styles.mjs +2 -5
- package/esm/core/styles-api/use-styles/use-styles.mjs.map +1 -1
- package/esm/index.mjs +13 -3
- package/lib/components/button/button.types.d.ts +1 -11
- package/lib/components/index.d.ts +1 -0
- package/lib/components/text/text.types.d.ts +1 -1
- package/lib/components/transition/get-transition-props/get-transition-props.d.ts +5 -0
- package/lib/components/transition/get-transition-styles/get-transition-styles.d.ts +17 -0
- package/lib/components/transition/index.d.ts +8 -0
- package/lib/components/transition/transition.types.d.ts +66 -0
- package/lib/components/transition/transitions.d.ts +10 -0
- package/lib/components/transition/use-transition.d.ts +20 -0
- package/lib/core/box/style-props/parse-style-props/parse-style-props.d.ts +1 -1
- package/lib/core/config-provider/cck-css-variables/index.d.ts +3 -0
- package/lib/core/config-provider/cck-css-variables/virtual-color/virtual-color.d.ts +1 -1
- package/lib/core/config-provider/color-functions/index.d.ts +2 -1
- package/lib/core/config-provider/color-functions/parse-theme-color/parse-theme-color.d.ts +1 -1
- package/lib/core/config-provider/color-scheme-managers/index.d.ts +4 -0
- package/lib/core/config-provider/color-scheme-managers/is-cck-color-scheme.d.ts +2 -0
- package/lib/core/config-provider/color-scheme-managers/local-storage-manager.d.ts +5 -0
- package/lib/core/config-provider/color-scheme-managers/types.d.ts +30 -0
- package/lib/core/config-provider/config-provider.context.d.ts +4 -3
- package/lib/core/config-provider/config-provider.types.d.ts +10 -4
- package/lib/core/config-provider/create-theme/create-theme.d.ts +2 -0
- package/lib/core/config-provider/index.d.ts +3 -0
- package/lib/core/config-provider/merge-cck-theme/index.d.ts +1 -0
- package/lib/core/config-provider/merge-cck-theme/merge-cck-theme.d.ts +5 -0
- package/lib/core/config-provider/use-cck-color-scheme/index.d.ts +2 -0
- package/lib/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.d.ts +10 -0
- package/lib/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.d.ts +15 -0
- package/lib/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.d.ts +7 -0
- package/package.json +3 -1
- package/styles/button.css +5 -9
- package/styles/button.layer.css +5 -9
- package/styles/default-css-variables.css +30 -30
- package/styles/default-css-variables.layer.css +30 -30
- package/styles/text.css +10 -0
- package/styles/text.layer.css +10 -0
- package/styles.css +1482 -232
- package/styles.layer.css +1483 -233
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"col-custom.mjs","names":[],"sources":["../../../../src/components/grid/col/col-custom.ts"],"sourcesContent":["import { computed
|
|
1
|
+
{"version":3,"file":"col-custom.mjs","names":[],"sources":["../../../../src/components/grid/col/col-custom.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { ColProps, ColSpan } from './col.types'\nimport {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n keys,\n StyleProp,\n stylesToString,\n useCckTheme,\n} from '../../../core'\nimport { GridContextValue } from '../grid.context'\nimport type { GridBreakpoints } from '../grid.types'\n\ninterface ColVariablesProps {\n selector: string\n align?: ColProps['align'] | undefined\n offset?: StyleProp<number> | undefined\n order?: ColProps['order'] | undefined\n span: ColProps['span'] | undefined\n}\n\nconst getColumnFlexBasis = (colSpan: ColSpan | undefined, columns: number) => {\n if (colSpan === 'content') {\n return 'auto'\n }\n\n if (colSpan === 'auto') {\n return '0rem'\n }\n\n if (!colSpan) {\n return undefined\n }\n\n if (colSpan === columns) {\n return '100%'\n }\n\n const percentage = (100 * colSpan) / columns\n const gapFactor = (columns - colSpan) / columns\n return `calc(${percentage}% - ${gapFactor} * var(--grid-column-gap))`\n}\n\nconst getColumnMaxWidth = (\n colSpan: ColSpan | undefined,\n columns: number,\n grow: boolean | undefined\n) => {\n if (grow || colSpan === 'auto') {\n return '100%'\n }\n\n if (colSpan === 'content') {\n return 'unset'\n }\n\n return getColumnFlexBasis(colSpan, columns)\n}\n\nconst getColumnFlexGrow = (colSpan: ColSpan | undefined, grow: boolean | undefined) => {\n if (!colSpan) {\n return undefined\n }\n return colSpan === 'auto' || grow ? '1' : 'auto'\n}\n\nconst getColumnOffset = (offset: number | undefined, columns: number) => {\n if (offset === 0) {\n return '0'\n }\n\n if (!offset) {\n return undefined\n }\n\n const percentage = (100 * offset) / columns\n const gapFactor = offset / columns\n return `calc(${percentage}% + ${gapFactor} * var(--grid-column-gap))`\n}\n\nexport function useColCustomStyle(\n { align, offset, order, selector, span }: ColVariablesProps,\n gridContext: GridContextValue\n) {\n return computed(() => {\n const _theme = useCckTheme()\n const theme = _theme.value\n\n const _breakpoints = gridContext.breakpoints || theme.breakpoints\n const baseValue = getBaseValue(span)\n const baseSpan = baseValue === undefined ? 12 : baseValue\n\n const styles: Record<string, string | undefined> = filterProps({\n '--col-order': getBaseValue(order)?.toString(),\n '--col-flex-grow': getColumnFlexGrow(baseSpan, gridContext.grow),\n '--col-flex-basis': getColumnFlexBasis(baseSpan, gridContext.columns),\n '--col-width': baseSpan === 'content' ? 'auto' : undefined,\n '--col-max-width': getColumnMaxWidth(baseSpan, gridContext.columns, gridContext.grow),\n '--col-offset': getColumnOffset(getBaseValue(offset), gridContext.columns),\n '--col-align-self': getBaseValue(align),\n })\n\n const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint as string]) {\n acc[breakpoint as string] = {}\n }\n\n if (typeof order === 'object' && order[breakpoint as string] !== undefined) {\n acc[breakpoint as string]['--col-order'] = order[breakpoint as string]?.toString()\n }\n\n if (typeof span === 'object' && span[breakpoint as string] !== undefined) {\n acc[breakpoint as string]['--col-flex-grow'] = getColumnFlexGrow(\n span[breakpoint as string],\n gridContext.grow\n )\n acc[breakpoint as string]['--col-flex-basis'] = getColumnFlexBasis(\n span[breakpoint as string],\n gridContext.columns\n )\n acc[breakpoint as string]['--col-width'] =\n span[breakpoint as string] === 'content' ? 'auto' : undefined\n acc[breakpoint as string]['--col-max-width'] = getColumnMaxWidth(\n span[breakpoint as string],\n gridContext.columns,\n gridContext.grow\n )\n }\n\n if (typeof offset === 'object' && offset[breakpoint as string] !== undefined) {\n acc[breakpoint as string]['--col-offset'] = getColumnOffset(\n offset[breakpoint as string],\n gridContext.columns\n )\n }\n\n if (typeof align === 'object' && align[breakpoint] !== undefined) {\n acc[breakpoint as string]['--col-align-self'] = align[breakpoint]\n }\n\n return acc\n },\n {}\n )\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n )\n\n const values = sortedBreakpoints.map((breakpoint) => ({\n query:\n gridContext.type === 'container'\n ? `c-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n styles: queries[breakpoint.value],\n }))\n\n const queryStyles = {\n styles,\n media: gridContext.type === 'container' ? undefined : values,\n container: gridContext.type === 'container' ? values : undefined,\n selector,\n }\n\n const queryStylesString = stylesToString(queryStyles)\n\n return { queryStylesString }\n })\n}\n"],"mappings":"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"}
|
|
@@ -3,9 +3,10 @@ import export_helper_default from "../../../_virtual/_/plugin-vue/export-helper.
|
|
|
3
3
|
import { responsiveStyleManager } from "../../../core/responsive-style-manager/responsive-style-manager.mjs";
|
|
4
4
|
import { normalizeNumberLikeStringProp } from "../../../core/responsive-style-manager/normalize-number-like-string-prop/normalize-number-like-string-prop.mjs";
|
|
5
5
|
import { useRandomClassName } from "../../../core/box/use-random-classname/use-random-classname.mjs";
|
|
6
|
+
import { CBox } from "../../../core/box/index.mjs";
|
|
6
7
|
import { GRID_CONTEXT_KEY } from "../grid.constants.mjs";
|
|
7
8
|
import { useColCustomStyle } from "./col-custom.mjs";
|
|
8
|
-
import { computed, createBlock, defineComponent, guardReactiveProps, inject, normalizeProps, onUnmounted, openBlock, ref, renderSlot,
|
|
9
|
+
import { computed, createBlock, defineComponent, guardReactiveProps, inject, normalizeProps, onUnmounted, openBlock, ref, renderSlot, watchEffect, withCtx } from "vue";
|
|
9
10
|
import cx from "clsx";
|
|
10
11
|
//#region packages/@cck-ui/core/src/components/grid/col/col.vue
|
|
11
12
|
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
@@ -314,19 +315,33 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
314
315
|
setup(__props, { expose: __expose }) {
|
|
315
316
|
__expose();
|
|
316
317
|
const props = __props;
|
|
317
|
-
const
|
|
318
|
+
const knownProps = [
|
|
319
|
+
"classNames",
|
|
320
|
+
"className",
|
|
321
|
+
"style",
|
|
322
|
+
"styles",
|
|
323
|
+
"vars",
|
|
324
|
+
"span",
|
|
325
|
+
"order",
|
|
326
|
+
"offset",
|
|
327
|
+
"align"
|
|
328
|
+
];
|
|
318
329
|
const gridContext = inject(GRID_CONTEXT_KEY);
|
|
319
330
|
const responsiveClassname = useRandomClassName();
|
|
320
331
|
const rootAttrs = computed(() => gridContext.getStyles("col", {
|
|
321
|
-
className: cx(className, responsiveClassname),
|
|
322
|
-
style,
|
|
323
|
-
classNames,
|
|
324
|
-
styles
|
|
325
|
-
}));
|
|
326
|
-
const mergedAttrs = computed(() => ({
|
|
327
|
-
...others,
|
|
328
|
-
...rootAttrs.value
|
|
332
|
+
className: cx(props.className, responsiveClassname),
|
|
333
|
+
style: props.style,
|
|
334
|
+
classNames: props.classNames,
|
|
335
|
+
styles: props.styles
|
|
329
336
|
}));
|
|
337
|
+
const mergedAttrs = computed(() => {
|
|
338
|
+
const others = {};
|
|
339
|
+
for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
|
|
340
|
+
return {
|
|
341
|
+
...others,
|
|
342
|
+
...rootAttrs.value
|
|
343
|
+
};
|
|
344
|
+
});
|
|
330
345
|
const _offset = normalizeNumberLikeStringProp(props.offset);
|
|
331
346
|
const _order = normalizeNumberLikeStringProp(props.order);
|
|
332
347
|
const colStyle = useColCustomStyle({
|
|
@@ -353,16 +368,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
353
368
|
});
|
|
354
369
|
const __returned__ = {
|
|
355
370
|
props,
|
|
356
|
-
|
|
357
|
-
className,
|
|
358
|
-
style,
|
|
359
|
-
styles,
|
|
360
|
-
vars,
|
|
361
|
-
span,
|
|
362
|
-
order,
|
|
363
|
-
offset,
|
|
364
|
-
align,
|
|
365
|
-
others,
|
|
371
|
+
knownProps,
|
|
366
372
|
gridContext,
|
|
367
373
|
responsiveClassname,
|
|
368
374
|
rootAttrs,
|
|
@@ -370,7 +376,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
370
376
|
_offset,
|
|
371
377
|
_order,
|
|
372
378
|
colStyle,
|
|
373
|
-
currentStyleKey
|
|
379
|
+
currentStyleKey,
|
|
380
|
+
get CBox() {
|
|
381
|
+
return CBox;
|
|
382
|
+
}
|
|
374
383
|
};
|
|
375
384
|
Object.defineProperty(__returned__, "__isScriptSetup", {
|
|
376
385
|
enumerable: false,
|
|
@@ -380,13 +389,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
380
389
|
}
|
|
381
390
|
});
|
|
382
391
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
383
|
-
|
|
384
|
-
return openBlock(), createBlock(_component_c_box, normalizeProps(guardReactiveProps($setup.mergedAttrs)), {
|
|
392
|
+
return openBlock(), createBlock($setup["CBox"], normalizeProps(guardReactiveProps($setup.mergedAttrs)), {
|
|
385
393
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
386
394
|
_: 3
|
|
387
395
|
}, 16);
|
|
388
396
|
}
|
|
389
|
-
var col_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
397
|
+
var col_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/grid/col/col.vue"]]);
|
|
390
398
|
//#endregion
|
|
391
399
|
export { col_default as default };
|
|
392
400
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"
|
|
1
|
+
{"version":3,"file":"col.mjs","names":[],"sources":["../../../../src/components/grid/col/col.vue"],"sourcesContent":["<template>\n <c-box v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, inject, onUnmounted, ref, watchEffect } from 'vue'\nimport {\n CBox,\n normalizeNumberLikeStringProp,\n responsiveStyleManager,\n useRandomClassName,\n} from '../../../core'\nimport type { ColProps } from './col.types'\nimport { useColCustomStyle } from './col-custom'\nimport { GridContextValue } from '../grid.context'\nimport { GRID_CONTEXT_KEY } from '../grid.constants'\n\ndefineOptions({\n name: 'CCol',\n})\n\nconst props = withDefaults(defineProps<ColProps>(), {\n span: 12,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'vars',\n 'span',\n 'order',\n 'offset',\n 'align',\n]\n\nconst gridContext = inject(GRID_CONTEXT_KEY) as GridContextValue\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() =>\n gridContext.getStyles('col', {\n className: cx(props.className, responsiveClassname),\n style: props.style,\n classNames: props.classNames,\n styles: props.styles,\n })\n)\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n for (const key in props) {\n if (!knownProps.includes(key)) {\n others[key] = props[key as keyof typeof props]\n }\n }\n return { ...others, ...rootAttrs.value }\n})\n\nconst _offset = normalizeNumberLikeStringProp(props.offset)\nconst _order = normalizeNumberLikeStringProp(props.order)\nconst colStyle = useColCustomStyle(\n {\n selector: responsiveClassname,\n align: props.align,\n offset: _offset,\n order: _order,\n span: props.span,\n },\n gridContext\n)\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n const cssText = colStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAId,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,cAAc,OAAO,gBAAgB;EAE3C,MAAM,sBAAsB,mBAAmB;EAE/C,MAAM,YAAY,eAChB,YAAY,UAAU,OAAO;GAC3B,WAAW,GAAG,MAAM,WAAW,mBAAmB;GAClD,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;EAChB,CAAC,CACH;EACA,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;GAGxB,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,UAAU,8BAA8B,MAAM,MAAM;EAC1D,MAAM,SAAS,8BAA8B,MAAM,KAAK;EACxD,MAAM,WAAW,kBACf;GACE,UAAU;GACV,OAAO,MAAM;GACb,QAAQ;GACR,OAAO;GACP,MAAM,MAAM;EACd,GACA,WACF;EAEA,MAAM,kBAAkB,IAAmB,IAAI;EAC/C,kBAAkB;GAChB,MAAM,UAAU,SAAS,MAAM;GAC/B,IAAI,SAAS;IACX,MAAM,SAAS,uBAAuB,SAAS,OAAO;IACtD,IAAI,gBAAgB,SAAS,gBAAgB,UAAU,QACrD,uBAAuB,WAAW,gBAAgB,KAAK;IAEzD,gBAAgB,QAAQ;GAC1B,OAAO,IAAI,gBAAgB,OAAO;IAChC,uBAAuB,WAAW,gBAAgB,KAAK;IACvD,gBAAgB,QAAQ;GAC1B;EACF,CAAC;EACD,kBAAkB;GAChB,IAAI,gBAAgB,OAClB,uBAAuB,WAAW,gBAAgB,KAAK;EAE3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;qBA5FC,YAEQ,OAAA,SAAA,eAAA,mBAFO,OAAA,WAAW,CAAA,GAAA;yBAChB,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
|
|
@@ -4,14 +4,13 @@ import { getBaseValue } from "../../core/utils/get-base-value/get-base-value.mjs
|
|
|
4
4
|
import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
|
|
5
5
|
import { getSortedBreakpoints } from "../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.mjs";
|
|
6
6
|
import { keys } from "../../core/utils/keys/keys.mjs";
|
|
7
|
-
import {
|
|
8
|
-
import { DEFAULT_THEME } from "../../core/config-provider/default-theme.mjs";
|
|
7
|
+
import { useCckTheme } from "../../core/config-provider/config-provider.context.mjs";
|
|
9
8
|
import { stylesToString } from "../../core/responsive-style-manager/styles-to-string/styles-to-string.mjs";
|
|
10
|
-
import { computed
|
|
9
|
+
import { computed } from "vue";
|
|
11
10
|
//#region packages/@cck-ui/core/src/components/grid/grid-custom.ts
|
|
12
11
|
function useGridCustomStyle({ breakpoints, columnGap, gap, rowGap, selector, type }) {
|
|
13
12
|
return computed(() => {
|
|
14
|
-
const theme =
|
|
13
|
+
const theme = useCckTheme().value;
|
|
15
14
|
const _breakpoints = breakpoints || theme.breakpoints;
|
|
16
15
|
const styles = filterProps({
|
|
17
16
|
"--grid-gap": getSpacing(getBaseValue(gap)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-custom.mjs","names":[],"sources":["../../../src/components/grid/grid-custom.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"grid-custom.mjs","names":[],"sources":["../../../src/components/grid/grid-custom.ts"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n keys,\n stylesToString,\n useCckTheme,\n} from '../../core'\nimport { GridBreakpoints, GridProps } from './grid.types'\nimport { computed } from 'vue'\n\ninterface GridVariablesProps extends GridProps {\n selector: string\n}\n\nexport function useGridCustomStyle({\n breakpoints,\n columnGap,\n gap,\n rowGap,\n selector,\n type,\n}: GridVariablesProps) {\n return computed(() => {\n const _theme = useCckTheme()\n const theme = _theme.value\n\n const _breakpoints = breakpoints || theme.breakpoints\n\n const styles: Record<string, string | undefined> = filterProps({\n '--grid-gap': getSpacing(getBaseValue(gap)),\n '--grid-row-gap': getSpacing(getBaseValue(rowGap)),\n '--grid-column-gap': getSpacing(getBaseValue(columnGap)),\n })\n\n const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint as string]) {\n acc[breakpoint as string] = {}\n }\n\n if (typeof gap === 'object' && gap[breakpoint as string] !== undefined) {\n acc[breakpoint as string]['--grid-gap'] = getSpacing(gap[breakpoint as string])\n }\n\n return acc\n },\n {}\n )\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n )\n\n const values = sortedBreakpoints.map((breakpoint) => ({\n query:\n type === 'container'\n ? `c-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n styles: queries[breakpoint.value],\n }))\n\n const queryStyles = {\n styles,\n media: type === 'container' ? undefined : values,\n container: type === 'container' ? values : undefined,\n selector,\n }\n\n const queryStylesString = stylesToString(queryStyles)\n\n return { queryStylesString }\n })\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,mBAAmB,EACjC,aACA,WACA,KACA,QACA,UACA,QACqB;CACrB,OAAO,eAAe;EAEpB,MAAM,QADS,YACI,CAAC,CAAC;EAErB,MAAM,eAAe,eAAe,MAAM;EAE1C,MAAM,SAA6C,YAAY;GAC7D,cAAc,WAAW,aAAa,GAAG,CAAC;GAC1C,kBAAkB,WAAW,aAAa,MAAM,CAAC;GACjD,qBAAqB,WAAW,aAAa,SAAS,CAAC;EACzD,CAAC;EAED,MAAM,UAAU,KAAK,YAAY,CAAC,CAAC,QAChC,KAAK,eAAe;GACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAwB,CAAC;GAG/B,IAAI,OAAO,QAAQ,YAAY,IAAI,gBAA0B,KAAA,GAC3D,IAAI,WAAqB,CAAC,gBAAgB,WAAW,IAAI,WAAqB;GAGhF,OAAO;EACT,GACA,CAAC,CACH;EAMA,MAAM,SAJoB,qBAAqB,KAAK,OAAO,GAAG,YAAY,CAAC,CAAC,QACzE,eAAe,KAAK,QAAQ,WAAW,MAAM,CAAC,CAAC,SAAS,CAG5B,CAAC,CAAC,KAAK,gBAAgB;GACpD,OACE,SAAS,cACL,sBAAsB,aAAa,WAAW,OAAgC,KAC9E,eAAe,aAAa,WAAW,OAAgC;GAC7E,QAAQ,QAAQ,WAAW;EAC7B,EAAE;EAWF,OAAO,EAAE,mBAFiB,eAAe;GANvC;GACA,OAAO,SAAS,cAAc,KAAA,IAAY;GAC1C,WAAW,SAAS,cAAc,SAAS,KAAA;GAC3C;EAGiD,CAE1B,EAAE;CAC7B,CAAC;AACH"}
|
|
@@ -3,12 +3,13 @@ import { isNumberLike } from "../../core/utils/is-number-like/is-number-like.mjs
|
|
|
3
3
|
import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
|
|
4
4
|
import { responsiveStyleManager } from "../../core/responsive-style-manager/responsive-style-manager.mjs";
|
|
5
5
|
import { useRandomClassName } from "../../core/box/use-random-classname/use-random-classname.mjs";
|
|
6
|
+
import { CBox } from "../../core/box/index.mjs";
|
|
6
7
|
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
|
|
7
8
|
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
|
|
8
9
|
import { useGridCustomStyle } from "./grid-custom.mjs";
|
|
9
10
|
import { GRID_CONTEXT_KEY } from "./grid.constants.mjs";
|
|
10
11
|
import grid_module_default from "./grid.module.mjs";
|
|
11
|
-
import { computed, createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onUnmounted, openBlock, provide, ref, renderSlot,
|
|
12
|
+
import { computed, createBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onUnmounted, openBlock, provide, ref, renderSlot, watchEffect, withCtx } from "vue";
|
|
12
13
|
//#region packages/@cck-ui/core/src/components/grid/grid.vue
|
|
13
14
|
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
14
15
|
name: "CGrid",
|
|
@@ -349,27 +350,52 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
349
350
|
setup(__props, { expose: __expose }) {
|
|
350
351
|
__expose();
|
|
351
352
|
const props = __props;
|
|
352
|
-
const
|
|
353
|
-
|
|
353
|
+
const knownProps = [
|
|
354
|
+
"classNames",
|
|
355
|
+
"className",
|
|
356
|
+
"style",
|
|
357
|
+
"styles",
|
|
358
|
+
"unstyled",
|
|
359
|
+
"vars",
|
|
360
|
+
"grow",
|
|
361
|
+
"gap",
|
|
362
|
+
"rowGap",
|
|
363
|
+
"columnGap",
|
|
364
|
+
"columns",
|
|
365
|
+
"align",
|
|
366
|
+
"justify",
|
|
367
|
+
"breakpoints",
|
|
368
|
+
"type",
|
|
369
|
+
"attributes"
|
|
370
|
+
];
|
|
371
|
+
const varsResolver = createVarsResolver((_, { justify, align, overflow }) => ({ root: {
|
|
372
|
+
"--grid-align": align,
|
|
373
|
+
"--grid-justify": justify,
|
|
374
|
+
"--grid-overflow": overflow
|
|
375
|
+
} }));
|
|
354
376
|
const getStyles = useStyles({
|
|
355
377
|
name: "Grid",
|
|
356
378
|
classes: grid_module_default,
|
|
357
379
|
props,
|
|
358
|
-
className,
|
|
359
|
-
style,
|
|
360
|
-
classNames,
|
|
361
|
-
styles,
|
|
362
|
-
unstyled,
|
|
363
|
-
attributes,
|
|
364
|
-
vars,
|
|
380
|
+
className: props.className,
|
|
381
|
+
style: props.style,
|
|
382
|
+
classNames: props.classNames,
|
|
383
|
+
styles: props.styles,
|
|
384
|
+
unstyled: props.unstyled,
|
|
385
|
+
attributes: props.attributes,
|
|
386
|
+
vars: props.vars,
|
|
365
387
|
varsResolver
|
|
366
388
|
});
|
|
367
389
|
const responsiveClassname = useRandomClassName();
|
|
368
390
|
const rootAttrs = computed(() => getStyles("root", { className: responsiveClassname }));
|
|
369
|
-
const mergedRootAttrs = computed(() =>
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
391
|
+
const mergedRootAttrs = computed(() => {
|
|
392
|
+
const others = {};
|
|
393
|
+
for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
|
|
394
|
+
return {
|
|
395
|
+
...others,
|
|
396
|
+
...rootAttrs.value
|
|
397
|
+
};
|
|
398
|
+
});
|
|
373
399
|
const innerAttrs = computed(() => getStyles("inner"));
|
|
374
400
|
const containerAttrs = computed(() => getStyles("container"));
|
|
375
401
|
const gridStyle = useGridCustomStyle({
|
|
@@ -419,24 +445,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
419
445
|
provide(GRID_CONTEXT_KEY, context);
|
|
420
446
|
const __returned__ = {
|
|
421
447
|
props,
|
|
448
|
+
knownProps,
|
|
422
449
|
varsResolver,
|
|
423
|
-
classNames,
|
|
424
|
-
className,
|
|
425
|
-
style,
|
|
426
|
-
styles,
|
|
427
|
-
unstyled,
|
|
428
|
-
vars,
|
|
429
|
-
grow,
|
|
430
|
-
gap,
|
|
431
|
-
rowGap,
|
|
432
|
-
columnGap,
|
|
433
|
-
columns,
|
|
434
|
-
align,
|
|
435
|
-
justify,
|
|
436
|
-
breakpoints,
|
|
437
|
-
type,
|
|
438
|
-
attributes,
|
|
439
|
-
others,
|
|
440
450
|
getStyles,
|
|
441
451
|
responsiveClassname,
|
|
442
452
|
rootAttrs,
|
|
@@ -449,7 +459,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
449
459
|
_columns,
|
|
450
460
|
_grow,
|
|
451
461
|
_type,
|
|
452
|
-
context
|
|
462
|
+
context,
|
|
463
|
+
get CBox() {
|
|
464
|
+
return CBox;
|
|
465
|
+
}
|
|
453
466
|
};
|
|
454
467
|
Object.defineProperty(__returned__, "__isScriptSetup", {
|
|
455
468
|
enumerable: false,
|
|
@@ -459,25 +472,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
459
472
|
}
|
|
460
473
|
});
|
|
461
474
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
default: withCtx(() => [createVNode(_component_c_box, normalizeProps(guardReactiveProps($setup.innerAttrs)), {
|
|
475
|
+
return $props.type === "container" && $props.breakpoints ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 0 }, $setup.containerAttrs)), {
|
|
476
|
+
default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.mergedRootAttrs)), {
|
|
477
|
+
default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.innerAttrs)), {
|
|
466
478
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
467
479
|
_: 3
|
|
468
480
|
}, 16)]),
|
|
469
481
|
_: 3
|
|
470
482
|
}, 16)]),
|
|
471
483
|
_: 3
|
|
472
|
-
}, 16)) : (openBlock(), createBlock(
|
|
473
|
-
default: withCtx(() => [createVNode(
|
|
484
|
+
}, 16)) : (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 1 }, $setup.mergedRootAttrs)), {
|
|
485
|
+
default: withCtx(() => [createVNode($setup["CBox"], normalizeProps(guardReactiveProps($setup.innerAttrs)), {
|
|
474
486
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
475
487
|
_: 3
|
|
476
488
|
}, 16)]),
|
|
477
489
|
_: 3
|
|
478
490
|
}, 16));
|
|
479
491
|
}
|
|
480
|
-
var grid_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
492
|
+
var grid_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/grid/grid.vue"]]);
|
|
481
493
|
//#endregion
|
|
482
494
|
export { grid_default as default };
|
|
483
495
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.mjs","names":[],"sources":["../../../src/components/grid/grid.vue"
|
|
1
|
+
{"version":3,"file":"grid.mjs","names":[],"sources":["../../../src/components/grid/grid.vue"],"sourcesContent":["<template>\n <c-box v-if=\"type === 'container' && breakpoints\" v-bind=\"containerAttrs\">\n <c-box v-bind=\"mergedRootAttrs\">\n <c-box v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </c-box>\n <template v-else>\n <c-box v-bind=\"mergedRootAttrs\">\n <c-box v-bind=\"innerAttrs\">\n <slot />\n </c-box>\n </c-box>\n </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, provide, ref, watchEffect } from 'vue'\nimport {\n CBox,\n createVarsResolver,\n isNumberLike,\n responsiveStyleManager,\n useRandomClassName,\n useStyles,\n} from '../../core'\nimport { useGridCustomStyle } from './grid-custom'\nimport { DEFAULT_COLUMNS, GRID_CONTEXT_KEY } from './grid.constants'\nimport { GridContextValue } from './grid.context'\nimport type { GridFactory, GridProps } from './grid.types'\nimport classes from './grid.module.css'\n\ndefineOptions({\n name: 'CGrid',\n})\n\nconst props = withDefaults(defineProps<GridProps>(), {\n columns: DEFAULT_COLUMNS,\n gap: 'md',\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'grow',\n 'gap',\n 'rowGap',\n 'columnGap',\n 'columns',\n 'align',\n 'justify',\n 'breakpoints',\n 'type',\n 'attributes',\n]\n\nconst varsResolver = createVarsResolver<GridFactory>((_, { justify, align, overflow }) => ({\n root: {\n '--grid-align': align,\n '--grid-justify': justify,\n '--grid-overflow': overflow,\n },\n}))\n\nconst getStyles = useStyles<GridFactory>({\n name: 'Grid',\n classes,\n props,\n className: props.className,\n style: props.style,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n attributes: props.attributes,\n vars: props.vars,\n varsResolver,\n})\n\nconst responsiveClassname = useRandomClassName()\n\nconst rootAttrs = computed(() => getStyles('root', { className: responsiveClassname }))\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n for (const key in props) {\n if (!knownProps.includes(key)) {\n others[key] = props[key as keyof typeof props]\n }\n }\n return { ...others, ...rootAttrs.value }\n})\n\nconst innerAttrs = computed(() => getStyles('inner'))\n\nconst containerAttrs = computed(() => getStyles('container'))\n\nconst gridStyle = useGridCustomStyle({\n selector: responsiveClassname,\n ...props,\n})\n\nconst currentStyleKey = ref<string | null>(null)\nwatchEffect(() => {\n const cssText = gridStyle.value.queryStylesString\n if (cssText) {\n const newKey = responsiveStyleManager.register(cssText)\n if (currentStyleKey.value && currentStyleKey.value !== newKey) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n currentStyleKey.value = newKey\n } else if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n currentStyleKey.value = null\n }\n})\nonUnmounted(() => {\n if (currentStyleKey.value) {\n responsiveStyleManager.unregister(currentStyleKey.value)\n }\n})\n\nconst _breakpoints = computed(() => props.breakpoints)\nconst _columns = computed(() => {\n if (!isNumberLike(props.columns)) {\n console.warn(\n `[C-Grid] columns should be number or number-like string, got ${props.columns}. Fallback to default columns ${DEFAULT_COLUMNS}.`\n )\n return DEFAULT_COLUMNS\n }\n\n return Number(props.columns)\n})\nconst _grow = computed(() => props.grow)\nconst _type = computed(() => props.type)\n\nconst context: GridContextValue = {\n getStyles,\n get breakpoints() {\n return _breakpoints.value\n },\n get columns() {\n return _columns.value\n },\n get grow() {\n return _grow.value\n },\n get type() {\n return _type.value\n },\n}\n\nprovide(GRID_CONTEXT_KEY, context)\n</script>\n"],"mappings":"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"}
|
|
@@ -422,7 +422,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
422
422
|
"variant"
|
|
423
423
|
]);
|
|
424
424
|
}
|
|
425
|
-
var group_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
425
|
+
var group_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/group/group.vue"]]);
|
|
426
426
|
//#endregion
|
|
427
427
|
export { group_default as default };
|
|
428
428
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"
|
|
1
|
+
{"version":3,"file":"group.mjs","names":[],"sources":["../../../src/components/group/group.vue"],"sourcesContent":["<template>\n <c-box v-bind=\"mergedAttrs\" :mod=\"[{ grow }, mod]\" :size=\"__size\" :variant=\"variant\">\n <component v-for=\"(node, index) in filteredChildren\" :key=\"node.key || index\" :is=\"node\" />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport type { GroupFactory, GroupProps, GroupStylesCtx } from './group.types'\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children'\nimport { createVarsResolver, getSpacing, useStyles, CBox } from '../../core'\nimport classes from './group.module.css'\n\ndefineOptions({\n name: 'CGroup',\n})\n\nconst slots = useSlots()\n\nconst props = withDefaults(defineProps<GroupProps>(), {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n})\n\nconst {\n classNames,\n className,\n style,\n styles,\n unstyled,\n gap,\n align,\n justify,\n wrap,\n grow,\n preventGrowOverflow,\n vars,\n variant,\n __size,\n mod,\n attributes,\n ...others\n} = props\n\nconst filteredChildren = filterFalsyChildren(slots.default?.())\nconst childrenCount = filteredChildren.length\nconst resolvedGap = getSpacing(gap)\nconst childWidth = `calc(${100 / childrenCount}% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`\n\nconst stylesCtx: GroupStylesCtx = { childWidth }\n\nconst varsResolver = createVarsResolver<GroupFactory>(\n (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n root: {\n '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n '--group-gap': getSpacing(gap),\n '--group-align': align,\n '--group-justify': justify,\n '--group-wrap': wrap,\n },\n })\n)\n\nconst getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props,\n stylesCtx,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => ({ ...others, ...rootAttrs.value }))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,SAAS;EAEvB,MAAM,QAAQ;EAQd,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,KACA,OACA,SACA,MACA,MACA,qBACA,MACA,SACA,QACA,KACA,YACA,GAAG,WACD;EAEJ,MAAM,mBAAmB,oBAAoB,MAAM,UAAU,CAAC;EAC9D,MAAM,gBAAgB,iBAAiB;EACvC,MAAM,cAAc,WAAW,GAAG;EAClC,MAAM,aAAa,QAAQ,MAAM,cAAc,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc;EAEtG,MAAM,YAA4B,EAAE,WAAW;EAE/C,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;GACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;GAClE,eAAe,WAAW,GAAG;GAC7B,iBAAiB;GACjB,mBAAmB;GACnB,gBAAgB;EAClB,EACF,EACF;EAEA,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN;GACA;GACA;GACA;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAE9B,gBAAgB;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM,EAAA;;;;;;;;;;;;;qBAlFlE,YAEQ,OAAA,SAFR,WAEQ,OAFO,aAAW;EAAG,KAAG,CAAA,EAAA,MAAK,OAAA,KAAI,GAAI,OAAA,GAAG;EAAI,MAAM,OAAA;EAAS,SAAS,OAAA;;yBACtB,EAAA,UAAA,IAAA,GAApD,mBAA2F,UAAA,MAAA,WAAxD,OAAA,mBAAhB,MAAM,UAAK;uBAA9B,YAA2F,wBAAR,IAAI,GAAA,EAAjC,KAAK,KAAK,OAAO,MAAA,CAAA"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { getSize } from "../../core/utils/get-size/get-size.mjs";
|
|
3
|
-
import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
|
|
4
3
|
import { getThemeColor } from "../../core/config-provider/color-functions/get-theme-color/get-theme-color.mjs";
|
|
4
|
+
import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
|
|
5
|
+
import { CBox } from "../../core/box/index.mjs";
|
|
5
6
|
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
|
|
6
7
|
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
|
|
7
8
|
import { useLoader } from "./use-loader.mjs";
|
|
8
9
|
import loader_module_default from "./loader.module.mjs";
|
|
9
10
|
import { CDefaultLoaders } from "./index.mjs";
|
|
10
|
-
import { computed, createBlock, defineComponent, mergeProps, normalizeProps, openBlock, renderSlot,
|
|
11
|
+
import { computed, createBlock, defineComponent, mergeProps, normalizeProps, openBlock, renderSlot, withCtx } from "vue";
|
|
11
12
|
//#region packages/@cck-ui/core/src/components/loader/loader.vue
|
|
12
13
|
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
13
14
|
name: "CLoader",
|
|
@@ -327,7 +328,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
327
328
|
},
|
|
328
329
|
setup(__props, { expose: __expose }) {
|
|
329
330
|
const props = __props;
|
|
330
|
-
const
|
|
331
|
+
const knownProps = [
|
|
332
|
+
"size",
|
|
333
|
+
"color",
|
|
334
|
+
"type",
|
|
335
|
+
"vars",
|
|
336
|
+
"className",
|
|
337
|
+
"style",
|
|
338
|
+
"classNames",
|
|
339
|
+
"styles",
|
|
340
|
+
"unstyled",
|
|
341
|
+
"loaders",
|
|
342
|
+
"variant",
|
|
343
|
+
"attributes"
|
|
344
|
+
];
|
|
331
345
|
const varsResolver = createVarsResolver((theme, { size, color }) => ({ root: {
|
|
332
346
|
"--loader-size": getSize(size, "loader-size"),
|
|
333
347
|
"--loader-color": color ? getThemeColor(color, theme) : void 0
|
|
@@ -336,20 +350,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
336
350
|
name: "Loader",
|
|
337
351
|
props,
|
|
338
352
|
classes: loader_module_default,
|
|
339
|
-
className,
|
|
340
|
-
style,
|
|
341
|
-
classNames,
|
|
342
|
-
styles,
|
|
343
|
-
unstyled,
|
|
344
|
-
attributes,
|
|
345
|
-
vars,
|
|
353
|
+
className: props.className,
|
|
354
|
+
style: props.style,
|
|
355
|
+
classNames: props.classNames,
|
|
356
|
+
styles: props.styles,
|
|
357
|
+
unstyled: props.unstyled,
|
|
358
|
+
attributes: props.attributes,
|
|
359
|
+
vars: props.vars,
|
|
346
360
|
varsResolver
|
|
347
361
|
});
|
|
348
362
|
const rootAttrs = computed(() => getStyles("root"));
|
|
349
|
-
const mergedAttrs = computed(() =>
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
363
|
+
const mergedAttrs = computed(() => {
|
|
364
|
+
const others = {};
|
|
365
|
+
for (const key in props) if (!knownProps.includes(key)) others[key] = props[key];
|
|
366
|
+
return {
|
|
367
|
+
...others,
|
|
368
|
+
...rootAttrs.value
|
|
369
|
+
};
|
|
370
|
+
});
|
|
353
371
|
const { _ref } = useLoader();
|
|
354
372
|
__expose({
|
|
355
373
|
/** @description loader html element */
|
|
@@ -359,24 +377,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
359
377
|
});
|
|
360
378
|
const __returned__ = {
|
|
361
379
|
props,
|
|
362
|
-
|
|
363
|
-
color,
|
|
364
|
-
type,
|
|
365
|
-
vars,
|
|
366
|
-
className,
|
|
367
|
-
style,
|
|
368
|
-
classNames,
|
|
369
|
-
styles,
|
|
370
|
-
unstyled,
|
|
371
|
-
loaders,
|
|
372
|
-
variant,
|
|
373
|
-
attributes,
|
|
374
|
-
others,
|
|
380
|
+
knownProps,
|
|
375
381
|
varsResolver,
|
|
376
382
|
getStyles,
|
|
377
383
|
rootAttrs,
|
|
378
384
|
mergedAttrs,
|
|
379
|
-
_ref
|
|
385
|
+
_ref,
|
|
386
|
+
get CBox() {
|
|
387
|
+
return CBox;
|
|
388
|
+
}
|
|
380
389
|
};
|
|
381
390
|
Object.defineProperty(__returned__, "__isScriptSetup", {
|
|
382
391
|
enumerable: false,
|
|
@@ -386,21 +395,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
|
386
395
|
}
|
|
387
396
|
});
|
|
388
397
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
389
|
-
|
|
390
|
-
return _ctx.$slots.default ? (openBlock(), createBlock(_component_c_box, normalizeProps(mergeProps({ key: 0 }, $setup.mergedAttrs)), {
|
|
398
|
+
return _ctx.$slots.default ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 0 }, $setup.mergedAttrs)), {
|
|
391
399
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
392
400
|
_: 3
|
|
393
|
-
}, 16)) : (openBlock(), createBlock(
|
|
394
|
-
tag: $
|
|
395
|
-
variant: $
|
|
396
|
-
size: $
|
|
401
|
+
}, 16)) : (openBlock(), createBlock($setup["CBox"], mergeProps({ key: 1 }, $setup.mergedAttrs, {
|
|
402
|
+
tag: $props.loaders[$props.type],
|
|
403
|
+
variant: $props.variant,
|
|
404
|
+
size: $props.size
|
|
397
405
|
}), null, 16, [
|
|
398
406
|
"tag",
|
|
399
407
|
"variant",
|
|
400
408
|
"size"
|
|
401
409
|
]));
|
|
402
410
|
}
|
|
403
|
-
var loader_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
411
|
+
var loader_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loader.vue"]]);
|
|
404
412
|
//#endregion
|
|
405
413
|
export { loader_default as default };
|
|
406
414
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"
|
|
1
|
+
{"version":3,"file":"loader.mjs","names":[],"sources":["../../../src/components/loader/loader.vue"],"sourcesContent":["<template>\n <c-box v-if=\"$slots.default\" v-bind=\"mergedAttrs\">\n <slot />\n </c-box>\n <c-box v-else v-bind=\"mergedAttrs\" :tag=\"loaders[type]\" :variant=\"variant\" :size=\"size\"></c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CBox, createVarsResolver, getSize, getThemeColor, useStyles } from '../../core'\nimport type { LoaderProps } from './loader.types'\nimport { useLoader } from './use-loader'\nimport { CDefaultLoaders, LoaderFactory } from '.'\nimport classes from './loader.module.css'\n\ndefineOptions({\n name: 'CLoader',\n})\n\nconst props = withDefaults(defineProps<LoaderProps>(), {\n loaders: () => CDefaultLoaders,\n type: 'oval',\n})\n\nconst knownProps = [\n 'size',\n 'color',\n 'type',\n 'vars',\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'unstyled',\n 'loaders',\n 'variant',\n 'attributes',\n]\n\nconst varsResolver = createVarsResolver<LoaderFactory>((theme, { size, color }) => ({\n root: {\n '--loader-size': getSize(size, 'loader-size'),\n '--loader-color': color ? getThemeColor(color, theme) : undefined,\n },\n}))\n\nconst getStyles = useStyles<LoaderFactory>({\n name: 'Loader',\n props,\n classes,\n className: props.className,\n style: props.style,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n attributes: props.attributes,\n vars: props.vars,\n varsResolver,\n})\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n const others: Record<string, any> = {}\n for (const key in props) {\n if (!knownProps.includes(key)) {\n others[key] = props[key as keyof typeof props]\n }\n }\n return { ...others, ...rootAttrs.value }\n})\n\nconst { _ref } = useLoader()\n\ndefineExpose({\n /** @description loader html element */\n ref: _ref,\n /** @description loader size */\n size: props.size,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAKd,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,eAAe,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;GACJ,iBAAiB,QAAQ,MAAM,aAAa;GAC5C,kBAAkB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;EAC1D,EACF,EAAE;EAEF,MAAM,YAAY,UAAyB;GACzC,MAAM;GACN;GACA,SAAA;GACA,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,MAAM,MAAM;GACZ;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,MAAM;GAGxB,OAAO;IAAE,GAAG;IAAQ,GAAG,UAAU;GAAM;EACzC,CAAC;EAED,MAAM,EAAE,SAAS,UAAU;EAE3B,SAAa;;GAEX,KAAK;;GAEL,MAAM,MAAM;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;QA9Ec,KAAA,OAAO,WAAA,UAAA,GAApB,YAEQ,OAAA,SAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAF6B,OAAA,WAAW,CAAA,GAAA;yBACtC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;yBAEV,YAAgG,OAAA,SAAhG,WAAgG,EAAA,KAAA,EAAA,GAA1E,OAAA,aAAW;EAAG,KAAK,OAAA,QAAQ,OAAA;EAAQ,SAAS,OAAA;EAAU,MAAM,OAAA"}
|
|
@@ -344,7 +344,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
344
344
|
_: 1
|
|
345
345
|
}, 16, ["class"]);
|
|
346
346
|
}
|
|
347
|
-
var bars_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
347
|
+
var bars_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loaders/bars.vue"]]);
|
|
348
348
|
//#endregion
|
|
349
349
|
export { bars_default as default };
|
|
350
350
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bars.mjs","names":[],"sources":["../../../../src/components/loader/loaders/bars.vue"
|
|
1
|
+
{"version":3,"file":"bars.mjs","names":[],"sources":["../../../../src/components/loader/loaders/bars.vue"],"sourcesContent":["<template>\n <c-box tag=\"span\" v-bind=\"others\" :class=\"loaderClass\">\n <span :class=\"classes.bar\" />\n <span :class=\"classes.bar\" />\n <span :class=\"classes.bar\" />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.barsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAa6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;qBAdzC,YAIQ,kBAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,OAAO,OAAA,YAAW,CAAA,GAAA;yBACtB;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}
|
|
@@ -344,7 +344,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
344
344
|
_: 1
|
|
345
345
|
}, 16, ["class"]);
|
|
346
346
|
}
|
|
347
|
-
var dots_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "
|
|
347
|
+
var dots_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/loader/loaders/dots.vue"]]);
|
|
348
348
|
//#endregion
|
|
349
349
|
export { dots_default as default };
|
|
350
350
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dots.mjs","names":[],"sources":["../../../../src/components/loader/loaders/dots.vue"
|
|
1
|
+
{"version":3,"file":"dots.mjs","names":[],"sources":["../../../../src/components/loader/loaders/dots.vue"],"sourcesContent":["<template>\n <c-box tag=\"span\" v-bind=\"others\" :class=\"loaderClass\">\n <span :class=\"classes.dot\" />\n <span :class=\"classes.dot\" />\n <span :class=\"classes.dot\" />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport type { LoaderProps } from '../loader.types'\nimport classes from '../loader.module.css'\n\nconst { className, attributes, ...others } = defineProps<LoaderProps>()\n\nconst loaderClass = cx(classes.dotsLoader, className)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAa6C,qBAAA,SAAA,CAAA,aAAA,YAAA,CAAA;gBAEzB,GAAG,sBAAQ,YAAY,QAAA,SAAA;;;;;;;;;;;;;;qBAdzC,YAIQ,kBAJR,WAIQ,EAJD,KAAI,OAAM,GAAS,OAAA,QAAM,EAAG,OAAO,OAAA,YAAW,CAAA,GAAA;yBACtB;GAA7B,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA;GACzB,mBAA6B,QAAA,EAAtB,OAAK,eAAE,OAAA,QAAQ,GAAG,EAAA,GAAA,MAAA,CAAA"}
|