@dpa-id-components/dpa-shared-components 4.0.1-3 → 4.0.2

package/dist/tailwind.config.cjs

@@ -1,13 +1,17 @@
-const screens = require("./screens.json");
-
 module.exports = {
   theme: {
     inset: {
       0: 0,
       "1/2": "50%",
-      full: "100%",
+      full: "100%"
+    },
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      xxl: "1600px"
     },
-    screens,
     fontSize: {
       xs: "12px",
       sm: "14px",
@@ -19,7 +23,7 @@ module.exports = {
       "4xl": "36px",
       "5xl": "48px",
       "6xl": "60px",
-      "7xl": "72px",
+      "7xl": "72px"
     },
     spacing: {
       px: "1px",
@@ -58,23 +62,23 @@ module.exports = {
       64: "256px",
       72: "288px",
       80: "320px",
-      96: "384px",
+      96: "384px"
     },
     extend: {
       outline: {
-        blue: ["2px solid rgba(0, 62, 219, 0.5)", "2px"],
+        blue: ["2px solid rgba(0, 62, 219, 0.5)", "2px"]
       },
       fontFamily: {
         sans: ["Inter", "sans-serif"],
-        marketing: ["Futura", "sans-serif"],
+        marketing: ["Futura", "sans-serif"]
       },
       spacing: {
         inherit: "inherit",
         half: "2px", // 2px,
-        inputFocused: "15px",
+        inputFocused: "15px"
       },
       duration: {
-        0: "0ms",
+        0: "0ms"
       },
       colors: {
         transparent: "rgba(255, 255, 255, 0)",
@@ -90,69 +94,69 @@ module.exports = {
           600: "#7E7E7E",
           700: "#757575",
           800: "#4D4D4D",
-          900: "#212121",
+          900: "#212121"
         },
         blue: {
           default: "#003edb",
-          dark: "#0030aa",
+          dark: "#0030aa"
         },
         red: {
           default: "#E53935",
-          dark: "#AB000D",
+          dark: "#AB000D"
         },
         pink: {
           default: "#F5138D",
-          dark: "#BD0060",
+          dark: "#BD0060"
         },
         purple: {
           default: "#8E24AA",
-          dark: "#5C007A",
+          dark: "#5C007A"
         },
         cyan: {
           default: "#00ACC1",
-          dark: "#007C91",
+          dark: "#007C91"
         },
         teal: {
           default: "#00897B",
-          dark: "#005B4F",
+          dark: "#005B4F"
         },
         green: {
           default: "#30DF7B",
-          dark: "#00AC4D",
+          dark: "#00AC4D"
         },
         yellow: {
           default: "#F9F500",
-          dark: "#C1BE00",
+          dark: "#C1BE00"
         },
         orange: {
           default: "#FFB300",
-          dark: "#C68400",
+          dark: "#C68400"
         },
         "alert-red": {
           default: "#F53000",
-          dark: "#BA2400",
+          dark: "#BA2400"
         },
         "alert-green": {
           default: "#00D200",
-          dark: "#00AA00",
+          dark: "#00AA00"
         },
         "neon-green": "#00E281",
         rainbow: {
           red: "#E53935",
           "red-dark": "#AB000D",
           orange: "#FFB300",
-          purple: "#8E24AA",
-        },
+          purple: "#8E24AA"
+        }
       },
       opacity: {
         60: "0.6",
-        20: "0.2",
+        20: "0.2"
       },
       boxShadow: {
         default: "0px 1px 1px rgba(0, 0, 0, 0.1)",
         negative: "0px -1px 1px rgba(0, 0, 0, 0.1)",
         md: "0px 1px 5px rgba(0, 0, 0, 0.1)",
-        lg: "0px 2px 6px rgba(0, 0, 0, 0.25)",
+        lg: "0px 2px 6px rgba(0, 0, 0, 0.25)"
       },
       inset: {
         0: 0,
@@ -163,10 +167,10 @@ module.exports = {
         5: "20px",
         12: "48px",
         16: "64px",
-        full: "100%",
+        full: "100%"
       },
       screens: {
-        print: { raw: "print" },
+        print: { raw: "print" }
       },
       lineHeight: {
         3: "12px",
@@ -176,28 +180,29 @@ module.exports = {
         7: "28px",
         8: "32px",
         9: "36px",
-        10: "40px",
+        10: "40px"
       },
       width: {
-        4.5: "18px",
+        "4.5": "18px"
       },
       height: {
-        4.5: "18px",
-      },
+        "4.5": "18px"
+      }
     },
     maxHeight: {
-      60: "240px",
-    },
+      60: "240px"
+    }
+
   },
   variants: {
     opacity: ["responsive", "hover", "focus", "group-hover"],
     outline: ["focus", "focus-visible"],
     display: ["responsive", "group-hover"],
     textColor: ["responsive", "hover", "focus", "group-hover", "group-focus"],
-    textDecoration: ["group-hover"],
+    textDecoration: ["group-hover"]
   },
   plugins: [
     require("@tailwindcss/typography"),
-    require("@tailwindcss/container-queries"),
-  ],
+    require("@tailwindcss/container-queries")
+  ]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "4.0.1-3",
+  "version": "4.0.2",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "dist"
@@ -94,7 +94,6 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.8",
     "@vuepic/vue-datepicker": "^5.0.0",
-    "@vueuse/core": "^10.1.2",
     "date-fns": "^2.29.3",
     "uuid": "^9.0.0",
     "vue": "^3.2.45"

package/dist/UseTailwindBreakpoints.stories.ts

@@ -1,22 +0,0 @@
-import UseTailwindBreakpoints from "./UseTailwindBreakpoints.vue";
-import type { Meta, StoryObj } from "@storybook/vue3";
-
-const meta = {
-  title: "tailwind/useTailwindBreakpoints.ts",
-  component: UseTailwindBreakpoints,
-  argTypes: {},
-  parameters: {},
-} satisfies Meta<typeof UseTailwindBreakpoints>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args: any) => ({
-    setup() {
-      return { args };
-    },
-    components: { UseTailwindBreakpoints },
-    template: `<div><UseTailwindBreakpoints /></div>`,
-  }),
-};

package/dist/UseTailwindBreakpoints.vue

@@ -1,12 +0,0 @@
-<template>
-  <UiButton v-if="lg">Button for LG</UiButton>
-  <UiIconButton v-else icon-name="emoji" />
-</template>
-
-<script setup lang="ts">
-import useTailwindBreakpoints from "./useTailwindBreakpoints";
-import UiIconButton from "@/components/UiIconButton/UiIconButton.vue";
-import UiButton from "@/components/UiButton/UiButton.vue";
-
-const { lg } = useTailwindBreakpoints();
-</script>

package/dist/audio-inline-92256dc7.mjs

@@ -1,19 +0,0 @@
-import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
-const n = {
-  viewBox: "0 0 16 16",
-  xmlns: "http://www.w3.org/2000/svg"
-}, l = /* @__PURE__ */ t("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M12 6.66671C12.3687 6.66671 12.6667 6.96537 12.6667 7.33337C12.6667 9.68004 10.9247 11.6214 8.66668 11.9467V13.4708C8.66668 13.839 8.3682 14.1375 8.00001 14.1375C7.63182 14.1375 7.33334 13.839 7.33334 13.4708V11.9467C5.07534 11.6214 3.33334 9.68004 3.33334 7.33337C3.33334 6.96537 3.63134 6.66671 4.00001 6.66671C4.36868 6.66671 4.66668 6.96537 4.66668 7.33337C4.66668 9.17137 6.16201 10.6667 8.00001 10.6667C9.83801 10.6667 11.3333 9.17137 11.3333 7.33337C11.3333 6.96537 11.6313 6.66671 12 6.66671ZM10.1667 7.33337C10.1667 8.5279 9.19453 9.50004 8.00001 9.50004C6.80549 9.50004 5.83334 8.5279 5.83334 7.33337V5.00004C5.83334 3.80552 6.80549 2.83337 8.00001 2.83337C9.19453 2.83337 10.1667 3.80552 10.1667 5.00004V7.33337Z"
-}, null, -1), r = [
-  l
-];
-function C(c, d) {
-  return e(), o("svg", n, r);
-}
-const i = { render: C };
-export {
-  i as default,
-  C as render
-};

package/dist/graphic-inline-a41ad739.mjs

@@ -1,19 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  viewBox: "0 0 16 16",
-  xmlns: "http://www.w3.org/2000/svg"
-}, r = /* @__PURE__ */ o("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M5.5 10.75V8.25C5.5 7.83579 5.16421 7.5 4.75 7.5C4.33579 7.5 4 7.83579 4 8.25V10.75C4 11.1642 4.33579 11.5 4.75 11.5C5.16421 11.5 5.5 11.1642 5.5 10.75ZM8.5 10.75V6.25C8.5 5.83579 8.16421 5.5 7.75 5.5C7.33579 5.5 7 5.83579 7 6.25V10.75C7 11.1642 7.33579 11.5 7.75 11.5C8.16421 11.5 8.5 11.1642 8.5 10.75ZM11.5 10.75V4.25C11.5 3.83579 11.1642 3.5 10.75 3.5C10.3358 3.5 10 3.83579 10 4.25V10.75C10 11.1642 10.3358 11.5 10.75 11.5C11.1642 11.5 11.5 11.1642 11.5 10.75Z"
-}, null, -1), c = [
-  r
-];
-function l(d, C) {
-  return e(), t("svg", n, c);
-}
-const i = { render: l };
-export {
-  i as default,
-  l as render
-};

package/dist/picture-inline-0eb9c590.mjs

@@ -1,19 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  viewBox: "0 0 16 16",
-  xmlns: "http://www.w3.org/2000/svg"
-}, r = /* @__PURE__ */ o("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M5 4.5H11C11.138 4.5 11.25 4.612 11.25 4.75V8.594L9.62 7.507C9.252 7.262 8.767 7.287 8.427 7.57L4.75 10.625V4.75C4.75 4.612 4.862 4.5 5 4.5ZM11 3H5C4.034 3 3.25 3.783 3.25 4.75V10.75C3.25 11.717 4.034 12.5 5 12.5H11C11.966 12.5 12.75 11.717 12.75 10.75V4.75C12.75 3.783 11.966 3 11 3ZM6.5 7.25C7.052 7.25 7.5 6.803 7.5 6.25C7.5 5.697 7.052 5.25 6.5 5.25C5.948 5.25 5.5 5.697 5.5 6.25C5.5 6.803 5.948 7.25 6.5 7.25Z"
-}, null, -1), c = [
-  r
-];
-function l(d, s) {
-  return e(), t("svg", n, c);
-}
-const i = { render: l };
-export {
-  i as default,
-  l as render
-};

package/dist/screens.js

@@ -1,13 +0,0 @@
-export const screens = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1600px",
-};
-
-export default screens;
-
-if (module !== undefined) {
-  module.exports = screens;
-}

package/dist/screens.json

@@ -1,7 +0,0 @@
-{
-  "sm": "640px",
-  "md": "768px",
-  "lg": "1024px",
-  "xl": "1280px",
-  "xxl": "1600px"
-}

package/dist/tailwind/screens.d.ts

@@ -1,8 +0,0 @@
-export namespace screens {
-    const sm: string;
-    const md: string;
-    const lg: string;
-    const xl: string;
-    const xxl: string;
-}
-export default screens;

package/dist/tailwind/tailwind.config.d.cts

@@ -1,214 +0,0 @@
-declare const screens: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-};
-export namespace theme {
-    export const inset: {
-        0: number;
-        "1/2": string;
-        full: string;
-    };
-    export { screens };
-    export const fontSize: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-    };
-    export const spacing: {
-        px: string;
-        0: string;
-        0.5: string;
-        1: string;
-        1.5: string;
-        2: string;
-        2.5: string;
-        3: string;
-        3.5: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        10: string;
-        11: string;
-        12: string;
-        14: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        37: string;
-        40: string;
-        41: string;
-        44: string;
-        48: string;
-        52: string;
-        56: string;
-        60: string;
-        64: string;
-        72: string;
-        80: string;
-        96: string;
-    };
-    export namespace extend {
-        export namespace outline {
-            const blue: string[];
-        }
-        export namespace fontFamily {
-            const sans: string[];
-            const marketing: string[];
-        }
-        export namespace spacing_1 {
-            const inherit: string;
-            const half: string;
-            const inputFocused: string;
-        }
-        export { spacing_1 as spacing };
-        export const duration: {
-            0: string;
-        };
-        export const colors: {
-            transparent: string;
-            black: string;
-            white: string;
-            gray: {
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            blue: {
-                default: string;
-                dark: string;
-            };
-            red: {
-                default: string;
-                dark: string;
-            };
-            pink: {
-                default: string;
-                dark: string;
-            };
-            purple: {
-                default: string;
-                dark: string;
-            };
-            cyan: {
-                default: string;
-                dark: string;
-            };
-            teal: {
-                default: string;
-                dark: string;
-            };
-            green: {
-                default: string;
-                dark: string;
-            };
-            yellow: {
-                default: string;
-                dark: string;
-            };
-            orange: {
-                default: string;
-                dark: string;
-            };
-            "alert-red": {
-                default: string;
-                dark: string;
-            };
-            "alert-green": {
-                default: string;
-                dark: string;
-            };
-            "neon-green": string;
-            rainbow: {
-                red: string;
-                "red-dark": string;
-                orange: string;
-                purple: string;
-            };
-        };
-        export const opacity: {
-            60: string;
-            20: string;
-        };
-        export namespace boxShadow {
-            const _default: string;
-            export { _default as default };
-            export const negative: string;
-            export const md: string;
-            export const lg: string;
-        }
-        const inset_1: {
-            0: number;
-            auto: string;
-            1: string;
-            3: string;
-            4: string;
-            5: string;
-            12: string;
-            16: string;
-            full: string;
-        };
-        export { inset_1 as inset };
-        export namespace screens_1 {
-            namespace print {
-                const raw: string;
-            }
-        }
-        export { screens_1 as screens };
-        export const lineHeight: {
-            3: string;
-            4: string;
-            5: string;
-            6: string;
-            7: string;
-            8: string;
-            9: string;
-            10: string;
-        };
-        export const width: {
-            4.5: string;
-        };
-        export const height: {
-            4.5: string;
-        };
-    }
-    export const maxHeight: {
-        60: string;
-    };
-}
-export namespace variants {
-    const opacity_1: string[];
-    export { opacity_1 as opacity };
-    const outline_1: string[];
-    export { outline_1 as outline };
-    export const display: string[];
-    export const textColor: string[];
-    export const textDecoration: string[];
-}
-export const plugins: (typeof import("@tailwindcss/typography") | {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
-})[];
-export {};

package/dist/tailwind/useTailwindBreakpoints.d.ts

@@ -1,9 +0,0 @@
-declare const _default: () => {
-    currentBreakpoint: import("vue").ComputedRef<string[]>;
-    sm: import("vue").ComputedRef<boolean>;
-    md: import("vue").ComputedRef<boolean>;
-    lg: import("vue").ComputedRef<boolean>;
-    xl: import("vue").ComputedRef<boolean>;
-    xxl: import("vue").ComputedRef<boolean>;
-};
-export default _default;

package/dist/text-inline-cbb3242f.mjs

@@ -1,15 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  viewBox: "0 0 16 16",
-  xmlns: "http://www.w3.org/2000/svg"
-}, c = /* @__PURE__ */ o("path", { d: "M4.75 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H4.75C4.33579 5.5 4 5.16421 4 4.75C4 4.33579 4.33579 4 4.75 4ZM4.75 7H11.25C11.6642 7 12 7.33579 12 7.75C12 8.16421 11.6642 8.5 11.25 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75C4 7.33579 4.33579 7 4.75 7ZM4.75 10H8.25C8.66421 10 9 10.3358 9 10.75C9 11.1642 8.66421 11.5 8.25 11.5H4.75C4.33579 11.5 4 11.1642 4 10.75C4 10.3358 4.33579 10 4.75 10Z" }, null, -1), r = [
-  c
-];
-function C(s, l) {
-  return e(), t("svg", n, r);
-}
-const _ = { render: C };
-export {
-  _ as default,
-  C as render
-};

package/dist/useTailwindBreakpoints.ts

@@ -1,19 +0,0 @@
-import { useBreakpoints } from "@vueuse/core";
-import { computed } from "vue";
-import screens from "./screens.json";
-
-export default () => {
-  const breakpoints = useBreakpoints({
-    ...screens,
-  });
-
-  const currentBreakpoint = breakpoints.current();
-
-  const sm = computed(() => currentBreakpoint.value.includes("sm"));
-  const md = computed(() => currentBreakpoint.value.includes("md"));
-  const lg = computed(() => currentBreakpoint.value.includes("lg"));
-  const xl = computed(() => currentBreakpoint.value.includes("xl"));
-  const xxl = computed(() => currentBreakpoint.value.includes("xxl"));
-
-  return { currentBreakpoint, sm, md, lg, xl, xxl };
-};

package/dist/video-inline-b961f9cd.mjs

@@ -1,19 +0,0 @@
-import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
-const n = {
-  viewBox: "0 0 16 16",
-  xmlns: "http://www.w3.org/2000/svg"
-}, l = /* @__PURE__ */ t("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M7.304 12.0019C7.09933 12.0019 6.89267 11.9579 6.7 11.8672C6.268 11.6632 6 11.2585 6 10.8099V5.19252C6 4.74385 6.268 4.33918 6.7 4.13518C7.188 3.90518 7.76667 3.97252 8.17267 4.30785L11.572 7.11718C11.8447 7.34118 12 7.66385 12 8.00118C12 8.33852 11.8447 8.66118 11.572 8.88518L8.17267 11.6939C7.92733 11.8972 7.618 12.0019 7.304 12.0019Z"
-}, null, -1), r = [
-  l
-];
-function c(d, s) {
-  return e(), o("svg", n, r);
-}
-const _ = { render: c };
-export {
-  _ as default,
-  c as render
-};