wize-admin-library 0.1.0

package/dist/style.css

@@ -0,0 +1 @@
+:root{--admin-primary-color: #6366f1;--admin-primary-hover: #4f46e5;--admin-secondary-color: #8b5cf6;--admin-danger-color: #ef4444;--admin-success-color: #22c55e;--admin-warning-color: #f59e0b;--admin-font-family: "Inter", system-ui, -apple-system, sans-serif;--admin-font-size-base: 14px;--admin-border-radius: 6px;--admin-border-color: #e5e7eb;--admin-spacing-unit: 4px}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.wz-inline-flex{display:inline-flex}.wz-w-full{width:100%}.wz-cursor-not-allowed{cursor:not-allowed}.wz-cursor-pointer{cursor:pointer}.wz-items-center{align-items:center}.wz-justify-center{justify-content:center}.wz-rounded-md{border-radius:.375rem}.wz-border{border-width:1px}.wz-border-primary{border-color:var(--admin-primary-color, #6366f1)}.wz-bg-danger{background-color:var(--admin-danger-color, #ef4444)}.wz-bg-primary{background-color:var(--admin-primary-color, #6366f1)}.wz-bg-secondary{background-color:var(--admin-secondary-color, #8b5cf6)}.wz-bg-transparent{background-color:transparent}.wz-px-3{padding-left:.75rem;padding-right:.75rem}.wz-px-4{padding-left:1rem;padding-right:1rem}.wz-px-6{padding-left:1.5rem;padding-right:1.5rem}.wz-py-1{padding-top:.25rem;padding-bottom:.25rem}.wz-py-2{padding-top:.5rem;padding-bottom:.5rem}.wz-py-3{padding-top:.75rem;padding-bottom:.75rem}.wz-text-base{font-size:1rem;line-height:1.5rem}.wz-text-lg{font-size:1.125rem;line-height:1.75rem}.wz-text-sm{font-size:.875rem;line-height:1.25rem}.wz-font-medium{font-weight:500}.wz-text-primary{color:var(--admin-primary-color, #6366f1)}.wz-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.wz-opacity-50{opacity:.5}.wz-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.wz-duration-200{transition-duration:.2s}.wz-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:wz-bg-primary:hover{background-color:var(--admin-primary-color, #6366f1)}.hover\:wz-bg-primary-hover:hover{background-color:var(--admin-primary-hover, #4f46e5)}.hover\:wz-text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:wz-opacity-90:hover{opacity:.9}.focus\:wz-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:wz-ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:wz-ring-primary:focus{--tw-ring-color: var(--admin-primary-color, #6366f1)}.focus\:wz-ring-offset-2:focus{--tw-ring-offset-width: 2px}.active\:wz-bg-primary-hover:active{background-color:var(--admin-primary-hover, #4f46e5)}

package/dist/wize-admin-library.es.js

@@ -0,0 +1,126 @@
+import { computed as f } from "vue";
+function m(n, e, r, s, l, d, o, p) {
+  var t = typeof n == "function" ? n.options : n;
+  e && (t.render = e, t.staticRenderFns = r, t._compiled = !0), s && (t.functional = !0), d && (t._scopeId = "data-v-" + d);
+  var a;
+  if (o ? (a = function(i) {
+    i = i || // cached call
+    this.$vnode && this.$vnode.ssrContext || // stateful
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !i && typeof __VUE_SSR_CONTEXT__ < "u" && (i = __VUE_SSR_CONTEXT__), l && l.call(this, i), i && i._registeredComponents && i._registeredComponents.add(o);
+  }, t._ssrRegister = a) : l && (a = p ? function() {
+    l.call(
+      this,
+      (t.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : l), a)
+    if (t.functional) {
+      t._injectStyles = a;
+      var z = t.render;
+      t.render = function(_, u) {
+        return a.call(u), z(_, u);
+      };
+    } else {
+      var c = t.beforeCreate;
+      t.beforeCreate = c ? [].concat(c, a) : [a];
+    }
+  return {
+    exports: n,
+    options: t
+  };
+}
+const h = {
+  __name: "WzButton",
+  props: {
+    /**
+     * Visual style variant of the button.
+     * @values primary, secondary, danger, outline
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (n) => ["primary", "secondary", "danger", "outline"].includes(n)
+    },
+    /**
+     * Size of the button.
+     * @values sm, md, lg
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (n) => ["sm", "md", "lg"].includes(n)
+    },
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If true, renders as a block-level button (full width).
+     */
+    block: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    const r = n, s = f(() => {
+      const o = {
+        primary: "wz-bg-primary wz-text-white hover:wz-bg-primary-hover active:wz-bg-primary-hover",
+        secondary: "wz-bg-secondary wz-text-white hover:wz-opacity-90",
+        danger: "wz-bg-danger wz-text-white hover:wz-opacity-90",
+        outline: "wz-border wz-border-primary wz-text-primary wz-bg-transparent hover:wz-bg-primary hover:wz-text-white"
+      };
+      return o[r.variant] || o.primary;
+    }), l = f(() => {
+      const o = {
+        sm: "wz-text-sm wz-px-3 wz-py-1",
+        md: "wz-text-base wz-px-4 wz-py-2",
+        lg: "wz-text-lg wz-px-6 wz-py-3"
+      };
+      return o[r.size] || o.md;
+    });
+    return { __sfc: !0, props: r, emit: e, variantClasses: s, sizeClasses: l, handleClick: (o) => {
+      r.disabled || e("click", o);
+    } };
+  }
+};
+var v = function() {
+  var e = this, r = e._self._c, s = e._self._setupProxy;
+  return r("button", { class: [
+    "wz-inline-flex wz-items-center wz-justify-center",
+    "wz-rounded-md wz-font-medium wz-cursor-pointer",
+    "wz-transition-colors wz-duration-200 wz-ease-in-out",
+    "focus:wz-outline-none focus:wz-ring-2 focus:wz-ring-primary focus:wz-ring-offset-2",
+    s.variantClasses,
+    s.sizeClasses,
+    {
+      "wz-w-full": e.block,
+      "wz-opacity-50 wz-cursor-not-allowed": e.disabled
+    }
+  ], attrs: { disabled: e.disabled }, on: { click: s.handleClick } }, [e._t("default")], 2);
+}, y = [], b = /* @__PURE__ */ m(
+  h,
+  v,
+  y,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const g = b.exports, C = {
+  WzButton: g
+}, w = (n) => {
+  Object.entries(C).forEach(([e, r]) => {
+    n.component(e, r);
+  });
+};
+typeof window < "u" && window.Vue && w(window.Vue);
+const x = { install: w };
+export {
+  g as WzButton,
+  x as default
+};

package/dist/wize-admin-library.umd.js

@@ -0,0 +1 @@
+(function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s.WizeAdminLibrary={},s.Vue))})(this,function(s,u){"use strict";const T="";function _(n,e,r,d,l,f,i,C){var t=typeof n=="function"?n.options:n;e&&(t.render=e,t.staticRenderFns=r,t._compiled=!0),d&&(t.functional=!0),f&&(t._scopeId="data-v-"+f);var a;if(i?(a=function(o){o=o||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!o&&typeof __VUE_SSR_CONTEXT__<"u"&&(o=__VUE_SSR_CONTEXT__),l&&l.call(this,o),o&&o._registeredComponents&&o._registeredComponents.add(i)},t._ssrRegister=a):l&&(a=C?function(){l.call(this,(t.functional?this.parent:this).$root.$options.shadowRoot)}:l),a)if(t.functional){t._injectStyles=a;var k=t.render;t.render=function(x,z){return a.call(z),k(x,z)}}else{var w=t.beforeCreate;t.beforeCreate=w?[].concat(w,a):[a]}return{exports:n,options:t}}const m={__name:"WzButton",props:{variant:{type:String,default:"primary",validator:n=>["primary","secondary","danger","outline"].includes(n)},size:{type:String,default:"md",validator:n=>["sm","md","lg"].includes(n)},disabled:{type:Boolean,default:!1},block:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:e}){const r=n,d=u.computed(()=>{const i={primary:"wz-bg-primary wz-text-white hover:wz-bg-primary-hover active:wz-bg-primary-hover",secondary:"wz-bg-secondary wz-text-white hover:wz-opacity-90",danger:"wz-bg-danger wz-text-white hover:wz-opacity-90",outline:"wz-border wz-border-primary wz-text-primary wz-bg-transparent hover:wz-bg-primary hover:wz-text-white"};return i[r.variant]||i.primary}),l=u.computed(()=>{const i={sm:"wz-text-sm wz-px-3 wz-py-1",md:"wz-text-base wz-px-4 wz-py-2",lg:"wz-text-lg wz-px-6 wz-py-3"};return i[r.size]||i.md});return{__sfc:!0,props:r,emit:e,variantClasses:d,sizeClasses:l,handleClick:i=>{r.disabled||e("click",i)}}}};var h=function(){var e=this,r=e._self._c,d=e._self._setupProxy;return r("button",{class:["wz-inline-flex wz-items-center wz-justify-center","wz-rounded-md wz-font-medium wz-cursor-pointer","wz-transition-colors wz-duration-200 wz-ease-in-out","focus:wz-outline-none focus:wz-ring-2 focus:wz-ring-primary focus:wz-ring-offset-2",d.variantClasses,d.sizeClasses,{"wz-w-full":e.block,"wz-opacity-50 wz-cursor-not-allowed":e.disabled}],attrs:{disabled:e.disabled},on:{click:d.handleClick}},[e._t("default")],2)},v=[],y=_(m,h,v,!1,null,null,null,null);const c=y.exports,b={WzButton:c},p=n=>{Object.entries(b).forEach(([e,r])=>{n.component(e,r)})};typeof window<"u"&&window.Vue&&p(window.Vue);const g={install:p};s.WzButton=c,s.default=g,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "wize-admin-library",
+  "version": "0.1.0",
+  "description": "A reusable, lightweight, and highly customizable Vue 2.7 component library for admin panels.",
+  "main": "dist/wize-admin-library.umd.js",
+  "module": "dist/wize-admin-library.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/wize-admin-library.es.js",
+      "require": "./dist/wize-admin-library.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/vue": "^6.5.16",
+    "@vitejs/plugin-vue2": "^2.3.3",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.4",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^4.3.0",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.17",
+    "vite": "^4.5.9",
+    "vue": "^2.7.16",
+    "vue-loader": "^15.11.1",
+    "webpack": "^4.47.0"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "component-library",
+    "admin",
+    "tailwindcss"
+  ],
+  "license": "MIT"
+}